使用选择选项作为另一个元素的类答案

【问题标题】：Use a select option as a class on another element使用选择选项作为另一个元素的类
【发布时间】：2017-09-03 12:27:04
【问题描述】：

我希望将选择选项值作为类传递给另一个字段。

我已经设法手动完成了这项工作，但希望它能够动态地使用它，以便找到选择的实际选项并将该值用作一个类。见链接： https://jsfiddle.net/tmtgxL0n/

jQuery(document).ready(function() {
jQuery(".value").find('#pa_mount-colour').change(function() {
    var jQueryval = jQuery(this).val();

    if(jQueryval === 'cream'){
        jQuery('.woocommerce-product-gallery__image').addClass("cream");
    }else{
        jQuery('.woocommerce-product-gallery__image').removeClass("cream");
    }
});

});

只是想知道是否有人能指出我正确的方向。

【问题讨论】：

.addClass(jQueryval) ?您尝试了哪些方法，哪些方法无效？
I've managed to work this manually->请解释一下？
我希望类自动从选项值中提取。如果它可以查找选择的选项并从选项值中添加类。 if(jQueryval === '*selectvalue'){ jQuery('.woocommerce-product-gallery__image').addClass("*selectvalue"); }else{ jQuery('.woocommerce-product-gallery__image').removeClass("*selectvalue"); }
K 为什么不直接将该值添加到元素中，请查看我的答案
@DB86 仅适用于一个选择选项或来自不同选择框的所有选择选项？

标签： jquery html-select option

【解决方案1】：

您已经动态获取选定的值：

var jQueryval = jQuery(this).val();

只需使用它：

jQuery('.woocommerce-product-gallery__image').toggleClass(jQueryval);

注意toggleClass() 的使用，它会自动检查目标元素是否已经有一个类，并相应地添加或删除该类。

【讨论】：

【解决方案2】：

所以你希望 select 的值是另一个类，试试这个

jQuery(document).ready(function() 
		{
			function removeExistingClass()
			{
				jQuery('.value #pa_mount-colour option').each(function(){
					jQuery('.woocommerce-product-gallery__image').removeClass($(this).val());
				});
			}

			jQuery('.value #pa_mount-colour').change(function() 
			{
			    var jQueryval = jQuery(this).val();
			    removeExistingClass();
			    // this will remove if any prevous class added from the selects value
			    jQuery('.woocommerce-product-gallery__image').addClass(jQueryval);

			});
		});

.red{border:6px red solid;}   	
.green{border:6px green solid;}
.blue{border:6px blue solid;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <div class="value">
	  <select id="pa_mount-colour">
	  	<option value="red">Red</option>
	  	<option value="green">Green</option>
	  	<option value="blue">Blue</option>
	  </select>
   </div>

   <div class="woocommerce-product-gallery__image">Select will change my class</div>

【讨论】：

【解决方案3】：

jQuery(function ($) {

    function removeExistingClass(){
        $('#pa_mount-colour option').each(function(){
            $('.listings-sidebar-content').removeClass($(this).val());
        });
    }

    $('#pa_mount-colour').change(function() {
        var jQueryval = $(this).val();
        removeExistingClass();
        jQuery('.woocommerce-product-gallery__image').toggleClass(jQueryval);
    });

});

【讨论】：