Question

我有以下下拉选项的此表单。我想要一个某种类型的脚本，当用户从第一个框中选择U18ft时，只有前4个选项可用，如果最后3个选项中的选项O18ft可用，并且如果选择了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>

Answer 1

您需要使用id =“length”附加onChange事件，并根据其值，您可以使用一个switch case来确定要在另一个下拉列表中填充的值。

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

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

Answer 2

这是一个简单的样本

＆＃13;

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");

＆＃13;

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

＆＃13;

比较下拉选项与javascript

2 个答案: