两个选择框用jquery过滤选项

时间:2012-03-19 05:57:22

标签: jquery select

我有两个由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();

我砍掉它并且有点工作(用最丑陋的代码看到了)id更喜欢,如果我可以隐藏选项而不仅仅是灰色它们。

0 个答案:

没有答案