Question

我想要一个下拉列表，根据初始下拉列表中选择的值更改其选项。以下是一个示例：http://www.game-debate.com/can-I-run/ 以下是我点击第3代时的代码，第3代的所有处理器都应该在下一个数据列表中。

<form>              
    <table border="1">
        <tr>
            <td>Processor</td>
            <td><input list="browsers" name="browser">
                  <datalist id="browsers">
                    <option value="Core2Duo">
                    <option value="i3">
                    <option value="i5">
                    <option value="i7">
                    <option value="Xeon">
                  </datalist>
            </td>
            <td><input list="progen" name="progen">
                  <datalist id="progen">
                    <option value="1st Gen">
                    <option value="2nd Gen">
                    <option value="3rd Gen">
                    <option value="4th Gen">
                  </datalist>
            </td>
        </tr>
        <tr>
            <td>Ram</td>
            <td><input type="text"></td>
        </tr>
        <tr>
            <td>Motherboard</td>
            <td><input type="text"></td>
        </tr>
        <tr>
            <td>Ram</td>
            <td><input type="text"></td>
        </tr>
        <tr>
            <td>Harddrive</td>
            <td><input type="text"></td>
        </tr>
        <tr>
            <td>SSD</td>
            <td><input type="text"></td>
        </tr>
        <tr>
            <td>Graphics card</td>
            <td><input type="text"></td>
        </tr>
        <tr>
            <td>Optical drive</td>
            <td><input type="text"></td>
        </tr>
        <tr>
            <td>Power supply</td>
            <td><input type="text"></td>
        </tr>
        <tr>
            <td>Cabinet</td>
            <td><input type="text"></td>
        </tr>
        <tr>
            <td>Monitor</td>
            <td><input type="text"></td>
        </tr>
        <tr>
            <td>Keyboard</td>
            <td><input type="text"></td>
        </tr>       
        <tr>
            <td>Mouse</td>
            <td><input type="text"></td>
        </tr>
</form>
</table>

Answer 1

我这样做的方法是获取所选项目的索引或值，然后用它来更改其他数据列表。

例如，这是获取值的方法。

 document.getElementById("progen").selectedIndex;
    alert(document.getElementsByTagName("option")[x].value);

尝试使用this example from w3schools

this example

如果不清楚，请告诉我，我会尽力帮助你。

html格式的动态下拉列表，用于在从先前输入中选择值时更改数据列表

1 个答案: