如何使用javaScript从其他下拉菜单中选择一个下拉菜单项?

时间:2020-05-24 18:30:15

标签: javascript

我有两个状态下拉列表。在两个下拉菜单项中,都有两个州阿拉斯加和加利福尼亚。如果我从下拉列表中选择任何一项,则单击单选按钮,因此另一个下拉列表必须具有相同的选择。谁能帮我吗?谢谢

    <form>
        <select id="state1" name="state1">
            <option value="Alaska">Alaska</option>
            <option value="California">California</option>
        </select>
        <select id="state2" name="state2">
            <option value="Alaska">Alaska</option>
            <option value="California">California</option>
        </select>

     <input type="radio" id="yes" name="yesNo" onclick="yesnoCheck()" value="yes" />
    </form>


    JavaScript Code
    <script>
 var state= document.getElementById("state");
var selectedText = state.options[state.selectedIndex].text;

var state1= document.getElementById("state1");
var selectedText1 = state.options[state.selectedIndex].text;
selectedText1 =selectedText;

     </script>

2 个答案:

答案 0 :(得分:2)

您只需在单击单选按钮时将第一个选择的值分配给第二个选择即可。

 var stateSelect1 = document.getElementById("state1");
   
 var stateOption1 = document.getElementById("yes");

 var stateSelect2  = document.getElementById("state2");
   
 stateOption1.onclick = function(){
   stateSelect2.value = stateSelect1.value
 }
<form>
    <select id="state1" name="state1">
        <option value="Alaska">Alaska</option>
        <option value="California">California</option>
    </select>
    <select id="state2" name="state2">
        <option value="Alaska">Alaska</option>
        <option value="California">California</option>
    </select>

 <input type="radio" id="yes" name="yesNo" value="yes" />
</form>

答案 1 :(得分:1)

如果选中此框,则该值将被设置为第一次选择时的值。

在后端,您必须将yes或no更改为true或false。

<form>
    <select id="state1" name="state1">
        <option value="Alaska">Alaska</option>
        <option value="California">California</option>
    </select>
    <select id="state2" name="state2">
        <option id="state2_Alaska" value="Alaska">Alaska</option>
        <option id="state2_California" value="California">California</option>
    </select>

 <input id="radioCheck" type="checkbox" name="yesNo" />
</form>

<script>

    document.querySelector("#radioCheck").addEventListener("change", function() {

        if(document.querySelector("#radioCheck").value == true){
            var state = document.querySelector("#state1").value;
            document.querySelector("#state2_" + state).setAttribute("selected", true);
        }

    });

</script>