根据两个下拉菜单的选择设置隐藏值

Set Hidden Value Depending on Selection of two Dropdowns

本文关键字：选择 设置 隐藏 下拉菜单 两个      更新时间：2024-03-10

我正试图根据为两个不同的下拉框设置的值来设置一个隐藏值。

这是我到目前为止所拥有的，它不起作用，我希望它在下拉列表#bundle-options-5-color设置为Black，#bundle-Options-5-size设置为Child时将#bundle_options[5]的值设置为4。

<script type='text/javascript'>
$j(document).ready(function() {
    $j('#bundle-option-5-color').change(function() {
        if ($j(this).find('option:selected').text() == 'Black' &&
            $j('#bundle-option-5-size').find('option:selected').text() == 'Child')
        {
        $j('#bundle_option''[5'']').val('4');
        }
    });
});
</script>

HTML:

<select id="bundle-option-5-color" name="bundle_option[5]" bundle-option-select="" required-entry="" required="">
<option value="">Choose a selection...</option>
<option value="Black">Black</option>
<option value="Blue">Blue</option>
<option value="Pink">Pink</option>
<option value="Purple">Purple</option>
<option value="Red">Red</option>
<option value="Teal">Teal</option>
<option value="White">White</option>
</select>
<select id="bundle-option-5-size" name="bundle_option[5]" bundle-option-select="" required-entry="" required="">
<option value="">Choose a selection...</option>
<option value="Child">Child</option>
<option value="Youth">Youth</option>
<option value="Adult Small">Adult Small</option>
<option value="Adult Medium">Adult Medium</option>
<option value="Adult Large">Adult Large</option>
<option value="Adult X-Large">Adult X-Large</option>
<option value="Adult XX-Large">Adult XX-Large</option>
</select>
<input id="bundle_option[5]" type="hidden" value="" name="bundle_option[5]">

将函数绑定到两个change事件：

$(document).ready(function() {
   var fn = function() {
        if ($('#bundle-option-5-color').find('option:selected').text() == 'Black' &&
            $('#bundle-option-5-size').find('option:selected').text() == 'Child')
        {
          
        $('#bundle_option''[5'']').val('4');
        }
    }; 
    $('#bundle-option-5-color').change(fn);
    $('#bundle-option-5-size').change(fn);
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="bundle-option-5-color" name="bundle_option[5]" bundle-option-select="" required-entry="" required="">
<option value="">Choose a selection...</option>
<option value="Black">Black</option>
<option value="Blue">Blue</option>
<option value="Pink">Pink</option>
<option value="Purple">Purple</option>
<option value="Red">Red</option>
<option value="Teal">Teal</option>
<option value="White">White</option>
</select>
<select id="bundle-option-5-size" name="bundle_option[5]" bundle-option-select="" required-entry="" required="">
<option value="">Choose a selection...</option>
<option value="Child">Child</option>
<option value="Youth">Youth</option>
<option value="Adult Small">Adult Small</option>
<option value="Adult Medium">Adult Medium</option>
<option value="Adult Large">Adult Large</option>
<option value="Adult X-Large">Adult X-Large</option>
<option value="Adult XX-Large">Adult XX-Large</option>
</select>
<input id="bundle_option[5]" type="text" value="" name="bundle_option[5]">

如注释中所述，您需要为两个选项框更改事件触发函数。您可以使用这个通配符选择器$('[id^=bundle-option-5]').change(function() {})来完成此操作。

请在下面和jsFiddle上找到您的代码。

$(document).ready(function() {
    $('[id^=bundle-option-5]').change(function() {
        //console.log(this);
        // size or color changed
        if ($('#bundle-option-5-color').find('option:selected').text() == 'Black' &&
            $('#bundle-option-5-size').find('option:selected').text() == 'Child')
        {
        $('#bundle_option''[5'']').val('4');
          alert('black and child chosen!');
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="bundle-option-5-color" name="bundle_option[5]" change-container-classname"="" bundle-option-select="" required-entry="" required="">
<option value="">Choose a selection...</option>
<option value="Black">Black</option>
<option value="Blue">Blue</option>
<option value="Pink">Pink</option>
<option value="Purple">Purple</option>
<option value="Red">Red</option>
<option value="Teal">Teal</option>
<option value="White">White</option>
</select>
<select id="bundle-option-5-size" name="bundle_option[5]" change-container-classname"="" bundle-option-select="" required-entry="" required="">
<option value="">Choose a selection...</option>
<option value="Child">Child</option>
<option value="Youth">Youth</option>
<option value="Adult Small">Adult Small</option>
<option value="Adult Medium">Adult Medium</option>
<option value="Adult Large">Adult Large</option>
<option value="Adult X-Large">Adult X-Large</option>
<option value="Adult XX-Large">Adult XX-Large</option>
</select>
<input id="bundle_option[5]" type="hidden" value="" name="bundle_option[5]">

相关文章：