CODEWITHSUNDEEP
jquery
Rocco The Taco
Rocco The Taco

Reputation: 3777

JQuery change 2 selects based on option value

I have the following jQuery working so that when select id Box1 changes it successfully changes the values in id Box2,3,4 and 5 to that same value. How do I specifically change just the selects in id Box2 and Box5 to the value None ONLY when Box1 is set to None? 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
    <script type="text/javascript">
    $(function(){
        $('select').change(function(){ // when one changes
            $('select').val( $(this).val() ) // they all change
        })
    })
    </script>
    <style type="text/css">

    </style>
    <title>Untitled</title>
</head>
<body>
... (top of my page)
<select id="Box1">
  <option value="None">None</option>
  <option value="1">One</option>
</select>
...
... other content here...
... (bottom of my page)
<select id="Box2">
  <option value="None">None</option>
  <option value="1">One</option>
</select>

<select id="Box3">
  <option value="None">None</option>
  <option value="1">One</option>
</select>

<select id="Box4">
  <option value="None">None</option>
  <option value="1">One</option>
</select>

<select id="Box5">
  <option value="None">None</option>
  <option value="1">One</option>
</select>

</body>
</html>

Upvotes: 0

Views: 274

Answers (5)

L105
L105

Reputation: 5419

I have a different way to do this using data attributes in HTML. It is sometimes easier and it can handle any select.

HTML

<select id="Box1" data-box-change="['Box2', 'Box5']">
  <option value="None" data-when>None</option>
  <option value="1">One</option>
</select>

JAVASCRIPT

$(function() {
    $('select[data-box-change]').on('change', function() {
        var $this   = $(this),
            boxes   = eval($this.data('boxChange')),
            value   = $this.find('option[data-when]:selected').val();

        if (typeof value === "undefined") return;

        $('#' + boxes.join(', #')).val(value);
    });
});

DEMO

Upvotes: 1

reggaemahn
reggaemahn

Reputation: 6648

I guess this is what you are looking for

$(function(){    
  $("#Box1").change(function(){
    if($(this).val() == "None"){
        $("#Box2 option[value='None']").prop('selected', true);
        $("#Box5 option[value='None']").prop('selected', true);
    }
  });
});

Working FIDDLE

Upvotes: 1

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57095

$('select').change(function () { // when one changes
        if ($('select:nth(0)').val() == 'None') {
            $('#Box2,#Box5').val('None');
        }
    });

or using :nth

 $('select').change(function () { // when one changes
        if ($('select:nth(0)').val() == 'None') {
            $('select:nth(1),select:nth(4)').val('None');
        }
    });

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

Try this:

$('#Box1').change(function() {
    if ($(this).val() == "None") {
        $('#Box2, #Box5').val($(this).val());
    }
});

Upvotes: 2

tymeJV
tymeJV

Reputation: 104775

This should work:

$("#Box1").change(function() {
    if (this.value == "None") {
        $("#Box2, #Box5").val("None");
    }
});

Upvotes: 1

Related Questions