根据首次选择下拉列表更改选择下拉菜单？

Question

我正在尝试根据第一个选定的选项是否包含（m）或（ft）来更改第二个选择下拉列表。

我的表单HTML搜索如下：

<form id="search" action="/property_search" method="get" class="clearfix">
        <select name="sqsize" id="sqsize" class="sqsize">
            <option value="">sq.ft/sq.m:</option>
            <option value="233.52m">233.52m</option>
            <option value="233.52m">233.52m</option>
            <option value="467.04m">467.04m</option>
            <option value="2,513ft">2,513ft</option>
            <option value="2,513ft">2,513ft</option>
            <option value="5,026ft">5,026ft</option>
        </select>

        <select name="sqsizemin" id="sqsizemin" class="sqsizemin">
            <option value="">Size Min:</option>
        </select>

        <input type="submit" class="submit" value="Search">
    </form>

我的Jquery如下：

<script type="text/javascript">
$(function(){
$('#sqsize').change(function () {
var options = '';
if($(this).val() == 'm') {
    options = '<option value=""></option>';
}
else if ($(this).val() == 'ft') {
    options = '<option value="6">6</option>';
}
    $('#sqsizemin').html(options);
});
    $('#sqsize').trigger('change');
});

Answer 1

尝试这样的事情（使用indexOf）：

$(function(){
$("#sqsize").change(function(){
    var options = '';
    if($(this).val().indexOf('m') > -1) {
        options = '<option value="">mm</option>';
    }
    else if ($(this).val().indexOf('ft') > -1) {
        options = '<option value="6">6</option>';
    }
    $('#sqsizemin').html(options);        
});
});

工作小提琴：https://jsfiddle.net/robertrozas/b0w61quf/

Answer 2

试试这样： https://jsfiddle.net/kc5qqtco/

$(function(){

    $('#sqsize').change(function () {

        if($(this).val().match(/m/g)) {

            $('<option value=""></option>').appendTo('#sqsizemin');
        }
        else if ($(this).val().match(/ft/g)) {

            $('<option value="6">6</option>').appendTo('#sqsizemin');

        }

    });
});

Answer 3

使用indexOf将为您提供有效的解决方案。

请参阅jsfiddle