在下拉列表中设置选定的值不正确

Question

我使用以下代码在下拉列表中设置选定的值，我从逗号分隔的字符串中拆分值，它没有按预期工作。

如果使用string='text1,text2,text3,text4' ，它正在工作，如果我使用string='text2'它不起作用。

  var string='text1,text2,text3,text4';
  var opts = string.split(",");
  function selectOptions() 
  {
    var obj = $('#dropdown');
    for (var i in opts) 
    {
    obj.find('option[value=' + i + ']').prop('selected', true);
    }
  }
  selectOptions();

这是小提琴 。

Answer 1

你可以这样做：

var string='text2';
var opts = string.split(",");
function selectOptions() {
    var obj = $('#dropdown');
    for (var i in opts) {
        console.log(i);
        obj.find('option:contains(' + opts[i] + ')').prop('selected', true);
    }
}
selectOptions();

小提琴

Answer 2

你应该尝试这样的事情：

<select id="dropdown" multiple="multiple">
    <option value="text1">text1</option>
    <option value="text2">text2</option>
    <option value="text3">text3</option>
    <option value="text4">text4</option>
    <option value="text5">text5</option>
    <option value="text6">text6</option>
    <option value="text7">text7</option>
</select>

码：

var string='text4';
var opts = string.split(",");
function selectOptions() {
    var obj = $('#dropdown');
    for (var item in opts) {
        obj.find('option[value=' + opts[item] + ']').prop('selected', true);
    }
}
selectOptions();

小提琴

Answer 3

这是因为您的选择值与split（）生成的opts索引之间没有匹配。

这是一个概念问题

如果你真的想把你的比较基于标签而不是选项值，你可以这样做：

var string='text2,text4';
var opts = string.split(",");
function selectOptions() {
    var $obj = $('#dropdown option');

    for (var i in opts) {
        $obj.each(function(){
           $option = $(this);
           if($option.text() === opts[i]) $option.prop('selected', true);
        });
    }
}
selectOptions();

看这里的小提琴

Answer 4

在你的for(var i in opts) i包含当前项的索引，因此它始终从0开始。 你可以改变你的html和JavaScript： http ： //jsfiddle.net/xEwyd/7/

我在html中添加了实际值。 如果这不可能，您可以随时更改string以包含索引而不是值。