Question

我有以下jQuery工作，以便当选择ID Box1更改它成功将id Box2,3,4和5中的值更改为相同的值。当Box1设置为None时，如何仅将id Box2和Box5中的选择专门更改为值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>

Answer 1

试试这个：

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

Answer 2

这应该有效：

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

Answer 3

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

或使用:nth

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

Answer 4

我想这就是你要找的东西

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

工作FIDDLE

Answer 5

我在HTML中使用数据属性有不同的方法。它有时更容易，它可以处理任何选择。

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

JQuery根据选项值更改2选择

5 个答案: