Question

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

的选定选项

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

例如：

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

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

map1

所以整个js现在是：

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

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

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

Answer 2

请测试此片段。

您无法为<select>代码分配值（嗯，您可以，但这是一种沮丧的方式），您必须正确选择所需的每个<option>代码。因此，使用一些代码，一切都将是完美的。

＆＃13;

var data = document.getElementById('relationshipstrings').value

var arraydata = data.split(',');

$("#relationship option").each(function(){
  if($.inArray($(this).val(), arraydata)) {
    $(this).prop('selected', true);
  }
});

＆＃13;

<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">

＆＃13;

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">

JQuery只在数组中设置一次值

HTML

3 个答案: