Question

我想遍历页面上的所有选择输入，如果所选值不是某个选项，则将该值设置为选中

我有一些选择（在select1中选择，选择选项2）

<select name="select1">
  <option value="1">One</option>
  <option value="2" selected>Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>

<select name="select2">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>

<select name="select3">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>

这里的想法是有一个复选框，当它被选中时设置select2和select3选择选项2，因为它们没有选择该选项并在值中附加一个字符串，所以我知道它们已被更新例如'-updated'

我正在循环遍历它们，但我无法弄清楚如何将所选属性设置为选项'2'（如果尚未选中），然后将'-updated'附加到值

$('select').each(function() {

    var selected = $(this).find(":selected");

    if (selected.val() != 2) {
        // set option 2 as selected
        // append '-updated' to value

    }

}

小提琴https://jsfiddle.net/69zzr6xa/6/

Answer 1

检查以下示例。

循环浏览select元素
检查是否已选择该值，如果未设置该值。

还添加了更改其他下拉列表的代码，当任何一个更改时

＆＃13;

$(function() {
  var setValue = "2";

  /* Initialize the select's to base value */
  $('select').each(function() {
      $(this).val(setValue);
  });

  /* Change the values of select's when anyone of the select changes */
  $('select').change(function() {
    setValue = $(this).val();

    $('select').each(function() {
        $(this).val(setValue);
    });
  });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select1">
  <option value="1">One</option>
  <option value="2" selected>Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>

<select name="select2">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>

<select name="select3">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>

＆＃13;

Answer 2

＆＃13;

var selected = 0;
$('select').each(function(i) {
    var obj = $(this);
    if(i == 0) selected = $(this).find(":selected");
  
    if (obj.val() != 2) {
       if (obj.val().indexOf('-updated') < 0) {
         obj.val(selected.val());
         obj.find(":selected").text(selected.text()+" -updated");
       }
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<select name="select1">
  <option value="1">One</option>
  <option value="2" selected>Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>

<select name="select2">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>

<select name="select3">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>

<label>Set to two
  <input type="checkbox" id="set_to_two" name="set_to_two">
</label>

＆＃13;

jQuery将所有选择输入设置为特定值

2 个答案: