CODEWITHSUNDEEP
javascript
kodder360
kodder360

Reputation: 99

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

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>

Upvotes: 1

Views: 48

Answers (2)

dqve
dqve

Reputation: 609

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>

Upvotes: 2

Fabian Schuss
Fabian Schuss

Reputation: 62

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>

Upvotes: 1

Related Questions