JQuery change 2 根据选项值选择答案

【问题标题】：JQuery change 2 selects based on option valueJQuery change 2 根据选项值选择
【发布时间】：2013-08-12 23:32:10
【问题描述】：

我有以下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>

【问题讨论】：

标签： jquery

【解决方案1】：

试试这个：

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

【讨论】：

【解决方案2】：

我猜这就是你要找的东西

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

工作FIDDLE

【讨论】：

【解决方案3】：

这应该可行：

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

【讨论】：

【解决方案4】：

$('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');
        }
    });

【讨论】：

【解决方案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

【讨论】：