比较下拉选项与javascript

comparing drop down options with javascript

本文关键字：javascript 选项比较更新时间：2023-09-26

这个表单有以下下拉选项。我想要某种类型的脚本，当用户从第一个框中选择U18ft时，只有前4个选项可用，如果选择O18ft，最后3个选项可用，如果选择N/a，只有荒野可用。

或者如果他们选择了一个组合，它会标记不能完成?

<tr>
                <td>Veh Length:</td>
                 <td>
                    <select name="length" id="length">
                        <option value="N/A"> N/A
                        <option value="U18ft"> Under 18ft
                        <option value="O18ft"> Over 18ft
                    </select>
                 </td>
                 <td>Select pitch type:</td>
                 <td>
                    <select name="type" id="type">
                        <option value="Premier"> Premier
                        <option value="Standard"> Standard
                        <option value="Delux"> Delux
                        <option value="Wilderness"> Wilderness
                        <option value="Standard_super"> Super Standard
                        <option value="Delux_super"> Super Delux
                        <option value="Premier_super"> Super Premier
                     </select>
                 </td>
</tr>

下面是一个简单的示例

window.addEventListener('change', function(e) {
    //e.target
    if (e.target.id == "length") {
   	    toggleTypes(e.target.options[e.target.selectedIndex].value);
    }
});
function toggleTypes (lth) {
    var sct = document.getElementById("type");
    var ons = sct.options.length;    
    for (i=0;i<ons;i++) {
        if (lth == "N/A") {
            if (i == 3) {
                sct.options[i].style.display = "inline";
                sct.options.selectedIndex = 3;
	        }
            else {
                sct.options[i].style.display = "none";
            }
        }        
        else if (lth == "U18ft") {
            if (i < 4) {
                sct.options[i].style.display = "inline";
                sct.options.selectedIndex = 0;
	        }
            else {
                sct.options[i].style.display = "none";
            }
        }
        else if (lth == "O18ft") {
            if (i > 3) {
                sct.options[i].style.display = "inline";
                sct.options.selectedIndex = 4;
	        }
            else {
                sct.options[i].style.display = "none";
            }
        }
    }
}
toggleTypes("N/A");

<table>
    <tr>
        <td>Veh Length:</td>
        <td>
            <select name="length" id="length">
                <option value="N/A"> N/A </option>
                <option value="U18ft"> Under 18ft </option>
                <option value="O18ft"> Over 18ft </option>
            </select>
        </td>
        <td>Select pitch type:</td>
        <td>
            <select name="type" id="type">
                <option value="Premier"> Premier </option>
                <option value="Standard"> Standard </option>
                <option value="Delux"> Delux </option>
                <option value="Wilderness"> Wilderness </option>
                <option value="Standard_super"> Super Standard </option>
                <option value="Delux_super"> Super Delux </option>
                <option value="Premier_super"> Super Premier </option>
            </select>
        </td>
    </tr>
</table>

您需要在id="length"上附加onChange事件，并且根据它的值，您可以有一个开关案例来确定要在另一个下拉列表中填充的值。

Jquery中的示例事件处理程序:

 $('#length').change(function(){
     var selection= $("#length" ).val();
   //switch case on "selection" variable's value 
});