How to select a dropdown item from other dropdown using javaScript?

Question

I have two dropdown lists of states . In both dropdown items there is two state Alaska and California. If I select any item from dropdown list one then I hit the radio button so the other dropdown must have same selection. Can anyone help me please? Thanks

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

using jqury ussualy as simple as $('#dropdown1').val($('#dropdown2')) — Adam Mudianto
– Adam Mudianto, Commented May 24, 2020 at 18:42

dqve · Accepted Answer · 2020-05-24 18:46:44Z

2

You can simply do this by assigning the value of the first select to the second when the radio button is clicked.

 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>

answered May 24, 2020 at 18:46

dqve

6096 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Fabian Schuss · Accepted Answer · 2020-05-24 18:40:56Z

If you check the box the value will be set to the value in the first select.

In your backend you have to change yes or no to true or 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>

Collectives™ on Stack Overflow

How to select a dropdown item from other dropdown using javaScript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related