Question

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

这是我到目前为止所做的，它不起作用，我希望当下拉列表#bundal-option-5-color设置为Black并且#bund-时，将#bundle_option [5]的值设置为4 option-5-size设置为Child。

<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]">

Answer 1

如评论中所述，您需要触发两个选项框更改事件的功能。您可以使用此通配符选择器$('[id^=bundle-option-5]').change(function() {})执行此操作。

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

＆＃13;

$(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!');
        }

    });
});

＆＃13;

<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]">

＆＃13;

Answer 2

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

＆＃13;

$(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);
  
});

＆＃13;

<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]">

＆＃13;

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

2 个答案: