Question

这是我在html中的选择：

<select id="bgPosition">
    <option value="left top" selected="selected">Left Top</option>
    <option value="center top">Center Top</option>
    ..
</select>

在页面加载时，我需要使用另一个值更新所选值，因此我尝试使用.each .prop并执行此操作：

function setActiveOption(el,val){   
    $(el).find('option:selected').removeAttr('selected');
    $(el).find('option[value="'+val+'"]').attr('selected','selected');
    console.log('selected: '+$('#bgPosition').val())
}

其他选择框都可以，但不适用于#bgPosition我认为因为值包含空格。

selected属性位于正确的位置，但是显示第一个选项

知道如何解决这个问题？

我也试过不同的jQuery库

更新：这是my fiddle以及我如何运行功能。

Answer 1

鉴于您的示例小提琴，唯一不尊重您设置的值的select元素是中间的#bgRepeat，这是因为默认情况下您有两个option使用selected属性设置。

要解决此问题，请仅提供一个option属性selected。

话虽这么说，一个更好的解决方案就是使用.val()作为select本身的一个限制器，这是一个单行，因此使setActiveOption()函数变得多余。试试这个：

var template = [{
  "mainBgImgPosition": "right bottom",
  "mainBgImgRepeat": "no-repeat",
  "mainBgImgSize": "cover"
}]

jQuery(function($) {
  var Builder = {
    initialized: false,
    initialize: function() {
      if (this.initialized)
        return;

      this.initialized = true;
      $('#bgPosition').val(template[0].mainBgImgPosition);
      $('#bgRepeat').val(template[0].mainBgImgRepeat);
      $('#bgSize').val(template[0].mainBgImgSize);
    }
  }
  Builder.initialize();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="bgPosition" id="bgPosition">
  <option value="left top" selected="selected">Left Top</option>
  <option value="left center">Left Center</option>
  <option value="left bottom">Left Bottom</option>
  <option value="center top">Center Top</option>
  <option value="center center">Center Center</option>
  <option value="center bottom">Center Bottom</option>
  <option value="right top">Right Top</option>
  <option value="right center">Right Center</option>
  <option value="right bottom">Right Bottom</option>
</select>
<select name="bgRepeat" id="bgRepeat">
  <option value="repeat" selected="selected">Repeat All</option>
  <option value="repeat-x">Repeat X</option>
  <option value="repeat-y">Repeat Y</option>
  <option value="no-repeat">No Repeat</option>
</select>
<select name="bgSize" id="bgSize">
  <option value="auto" selected="selected">Auto</option>
  <option value="cover">Cover</option>
</select>

Answer 2

我在小提琴中尝试了你的代码，它对我有用。

https://jsfiddle.net/b8t1yavu/

你传递给el的函数setActiveOption是什么？它现在可能因此而起作用。您可以通过两种方式调用该函数。

setActiveOption('#bgPosition','center top')

OR

setActiveOption(bgPosition,'center top')

如果你想用第二种方法调用它，你必须稍微修改你的代码。这是https://jsfiddle.net/b8t1yavu/1/

的小提琴

Answer 3

我不知道你如何调用你的函数，但是当我在JSFiddle中运行它时似乎工作正常。您需要使用元素的id作为第一个参数调用函数，并将选项的 FULL 值作为第二个参数调用，因为HTML不会将单词作为单独的值进行汇总。

setActiveOption('#bgPosition', 'center'); // Does not work
setActiveOption('#bgPosition', 'center top'); // Works fine

https://jsfiddle.net/Youmy001/uyun2soo

更新后选择不显示正确的选定值

3 个答案: