JQuery 只在数组中设置一次值

Question

我有一个小问题。我从隐藏字段中获取一个值，将其拆分为一个数组，并将该数组设置为 <select>

的选定选项

我检查了日志，js 正在正确拆分数组，但由于某种原因，它只选择了第一个。

例如：

Only one option selected

HTML

<select id="relationship" multiple="multiple" name="com.Relationship" style="display:block;">
    <option value="ActiveParish">Active Parish Committee Member</option>
    <option value="AdminStaff">Administration/Staff</option>
    <option value="CommMember">Committee Member</option>
    <option value="Corporation">Corporation</option>
    <option value="Festival">Festival Committee</option>
    <option value="Friend">Friend</option>
    <option value="Music">Music Program</option>
    <option value="NewlyReg">Newly Registered</option>
    <option value="NotReg">Not Registered</option>
    <option value="Volunteer">Volunteer</option>
    <option value="Other">Other</option>
</select>

 <input id="relationshipstrings" name="com.RelationshipStrings" type="hidden" value="AdminStaff, CommMember, Corporation">

这是我的 Javascript

var data = document.getElementById('relationshipstrings').value

var arraydata = data.split(',');

console.log(arraydata)

$("#relationship").val(arraydata);

只是为了验证，这是控制台中的输出:)

Array(3) 0:"AdminStaff" 1:" CommMember" 2:" Corporation" length:3 __proto__:Array(0)

---

有什么想法吗？我让它工作了一秒钟，但我不知道我做了什么让它停止工作..

Answer 1

您需要修剪数组项，设置变量后添加此行：

arraydata = arraydata.map(item => item.trim());

所以现在整个js是：

var data = document.getElementById('relationshipstrings').value
var arraydata = data.split(',');
arraydata = arraydata.map(item => item.trim()); // trim
console.log(arraydata);
$("#relationship").val(arraydata);

或者正如@Rory McCrossan 建议的那样，简单地说：

var arraydata = data.split(', ');

Answer 2

请测试一下这个 sn-p。

您不能为<select> 标签赋值（当然可以，但这是一种不鼓励的方式），您必须正确选择您需要的每个<option> 标签。因此，只需一点代码，一切都会变得完美。

var data = document.getElementById('relationshipstrings').value

var arraydata = data.split(',');

$("#relationship option").each(function(){
  if($.inArray($(this).val(), arraydata)) {
    $(this).prop('selected', true);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="relationship" multiple="multiple" name="com.Relationship" style="display:block;">
    <option value="ActiveParish">Active Parish Committee Member</option>
    <option value="AdminStaff">Administration/Staff</option>
    <option value="CommMember">Committee Member</option>
    <option value="Corporation">Corporation</option>
    <option value="Festival">Festival Committee</option>
    <option value="Friend">Friend</option>
    <option value="Music">Music Program</option>
    <option value="NewlyReg">Newly Registered</option>
    <option value="NotReg">Not Registered</option>
    <option value="Volunteer">Volunteer</option>
    <option value="Other">Other</option>
</select>

 <input id="relationshipstrings" name="com.RelationshipStrings" type="hidden" value="AdminStaff, CommMember, Corporation">

Answer 3

value="AdminStaff, CommMember, Corporation" 之前的文本有一些额外的空间，所以split 将与这个空间一起创建数组元素

var data = document.getElementById('relationshipstrings').value

var arraydata = data.split(',').map(function(item) {
  return item.trim() // to remove white space
});

var select = document.getElementById('relationship');
// looping through select options
for (var i = 0; i < select.options.length; i++) {
  var currOption = select.options[i].value;
  // checking if current option values is matches with any value in the 
  // array. If matches then select it
  if (arraydata.indexOf(currOption) !== -1) {
    select.options[i].selected = true;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="relationship" multiple="multiple" name="com.Relationship" style="display:block;">
    <option value="ActiveParish">Active Parish Committee Member</option>
    <option value="AdminStaff">Administration/Staff</option>
    <option value="CommMember">Committee Member</option>
    <option value="Corporation">Corporation</option>
    <option value="Festival">Festival Committee</option>
    <option value="Friend">Friend</option>
    <option value="Music">Music Program</option>
    <option value="NewlyReg">Newly Registered</option>
    <option value="NotReg">Not Registered</option>
    <option value="Volunteer">Volunteer</option>
    <option value="Other">Other</option>
</select>

<input id="relationshipstrings" name="com.RelationshipStrings" type="hidden" value="AdminStaff, CommMember, Corporation">