0

我有以下jQuery工作，因此当Select ID Box1更改时，它成功地将ID Box 2,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>
4

5 回答 5

2

试试这个：

$('#Box1').change(function() {
    if ($(this).val() == "None") {
        $('#Box2, #Box5').val($(this).val());
    }
});
于 2013-08-12T14:34:56.157 回答
1

这应该有效：

$("#Box1").change(function() {
    if (this.value == "None") {
        $("#Box2, #Box5").val("None");
    }
});
于 2013-08-12T14:34:38.223 回答
1 
$('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');
        }
    });
于 2013-08-12T14:41:34.483 回答
1

我想这就是你要找的

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

工作小提琴

于 2013-08-12T14:41:44.513 回答
1

我有一种不同的方法来使用 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);
    });
});

演示

于 2013-08-12T15:21:21.133 回答