使用 jquery 的两个选择框过滤选项答案

【问题标题】：two select boxes filtering options with jquery使用 jquery 的两个选择框过滤选项
【发布时间】：2012-03-19 14:59:35
【问题描述】：

我有两个由 php 生成的选择框

    <div id="option-264" class="option">
        <span class="required">*</span>
        <b>Board Type:</b><br />
        <select name="option[264]" class="optionChoice">
            <option value=""> --- Please Select --- </option>
            <option value="20">All Mountain </option>
            <option value="21">Straight Jibber </option>
            <option value="22">Bender </option>
            <option value="23">Tripod </option>
         </select>
    </div>
    <br />
    <div id="option-265" class="option">
        <span class="required">*</span>
        <b>Board Size:</b><br />
        <select name="option[265]" class="optionChoice">
            <option value=""> --- Please Select --- </option>
            <option value="17">146                        </option>
            <option value="18">147                        </option>
            <option value="19">149                        </option>
            <option value="24">150                        </option>
            <option value="25">152                        </option>
            <option value="26">153                        </option>
            <option value="27">155                        </option>
            <option value="28">156                        </option>
            <option value="29">157                        </option>
            <option value="30">158                        </option>
            <option value="31">159                        </option>
         </select>
    </div>

我想根据当前选择框的变化隐藏或灰显选项。

即如果我选择板类型“直jibber”，它只出现在“152”“155”和“159”中，所以我想隐藏其他所有内容。

希望这是有道理的

      function displayVals() {
       var Values = $("#option-264>select").val();
       var Sizes = $("#option-265>select");
       switch (Values) { 
    case '20': 
        $("#option-265").fadeOut();
        $("#option-265>select option[value='18']").attr("disabled","disabled");
        $("#option-265>select option[value='19']").attr("disabled","disabled");
        $("#option-265>select option[value='26']").attr("disabled","disabled");
        $("#option-265>select option[value='27']").attr("disabled","disabled");
        $("#option-265>select option[value='29']").attr("disabled","disabled");
        $("#option-265>select option[value='30']").attr("disabled","disabled");
         $("#option-265").fadeIn(); 
        break;
    case '21': 
        $("#option-265").fadeOut();
        $("#option-265>select option[value='18']").attr("disabled","disabled");
        $("#option-265>select option[value='24']").attr("disabled","disabled");
        $("#option-265>select option[value='26']").attr("disabled","disabled");
        $("#option-265>select option[value='28']").attr("disabled","disabled");
        $("#option-265>select option[value='30']").attr("disabled","disabled");
         $("#option-265").fadeIn(); 
        break;
    case '22': 
        $("#option-265").fadeOut();
        $("#option-265>select option[value='18']").attr("disabled","disabled");
        $("#option-265>select option[value='24']").attr("disabled","disabled");
        $("#option-265>select option[value='26']").attr("disabled","disabled");
        $("#option-265>select option[value='28']").attr("disabled","disabled");
        $("#option-265>select option[value='30']").attr("disabled","disabled");
         $("#option-265").fadeIn(); 
        break;
    case '23': 
        $("#option-265").fadeOut();
        $("#option-265>select option[value='18']").attr("disabled","disabled");
        $("#option-265>select option[value='24']").attr("disabled","disabled");
        $("#option-265>select option[value='26']").attr("disabled","disabled");
        $("#option-265>select option[value='28']").attr("disabled","disabled");
        $("#option-265>select option[value='30']").attr("disabled","disabled");
         $("#option-265").fadeIn();  
        break;
    case '': 
        $("#option-265").fadeOut();
        break;
}
}
$("#option-264>select").change(displayVals);
displayVals();

我破解了它并让它工作了（用我见过的最丑陋的代码）我更喜欢如果我可以隐藏选项而不只是将它们变灰。

【问题讨论】：

mattgemmell.com/2008/12/08/what-have-you-tried
不，这没有意义。

标签： jquery select

【解决方案1】：

这样的？

$('select[name="option[264]"]').change(function(value) {
    var selected = $(this).children('option:selected').val();

    //hide all options
    $('select[name="option[265]"] option').hide(); 

    //show options based on initial selection
    if (selected == 20) {
        $('select[name="option[265]"]').find('option:contains("152"), option:contains("155"), option:contains("159")').show();
    } else if (selected == 21) {
       //etc etc
    }
});

我承认，这绝对不是最优雅的解决方案。

【讨论】：

不错，我认为 option:contains 真的会帮我整理一下，谢谢

【解决方案2】：

实际上我没有正确理解你，但是..我理解你有选择框，你希望它的值在改变后隐藏、显示等。

    <script type="text/javascript">
        jQuery(document).ready(function(){

    jQuery('#id_name_ur').change(function() {

           if(jQuery('#Idname option:selected').val() != ''){

$(this).hide(); 
                    //like this u can got ur solutions ...
    // put ur code here
                   alert("you selected an option");
    return true;
                }else{
    alert("please select an option");
    return false;
    }


    });

        });
    </script>

【讨论】：