blocks|key|100008|text|基本上是做一个values.split(',')，然后循环结果数组并设置Select。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|100009|entityMap^0|7|H|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>Basically do a <code>values.split(',')</code> and then loop through the resulting array and set the Select. </p>


blocks|key|317027|text|在jQuery中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|317028|$("#strings").val(["Test",+"Prof",+"Off"]);|code-block|syntax|javascript|317029|或者使用纯JavaScript：|317030|var+element+=+document.getElementById('strings');
var+values+=+["Test",+"Prof",+"Off"];
for+(var+i+=+0;+i+<+element.options.length;+i%2B%2B)+{
++++element.options[i].selected+=+values.indexOf(element.options[i].value)+>=+0;
}|317031|jQuery在这里做了重要的抽象。|317032|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>in jQuery:</p>

<pre><code>$("#strings").val(["Test", "Prof", "Off"]);
</code></pre>

<p>or in pure JavaScript:</p>

<pre><code>var element = document.getElementById('strings');
var values = ["Test", "Prof", "Off"];
for (var i = 0; i &lt; element.options.length; i++) {
    element.options[i].selected = values.indexOf(element.options[i].value) &gt;= 0;
}
</code></pre>

<p>jQuery does significant abstraction here.</p>


blocks|key|317044|text|只需为jQuery+val函数提供一个值数组：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|317045|var+values+=+"Test,Prof,Off";
$('#strings').val(values.split(','));|code-block|syntax|javascript|317046|并以相同的格式获取所选值：|317047|values+=+$('#strings').val();|317048|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Just provide the jQuery val function with an array of values:</p>

<pre><code>var values = "Test,Prof,Off";
$('#strings').val(values.split(','));
</code></pre>

<p>And to get the selected values in the same format:</p>

<pre><code>values = $('#strings').val();
</code></pre>


blocks|key|317052|text|var+groups+=+["Test",+"Prof","Off"];

++++$('#fruits+option').filter(function()+{
++++++return+groups.indexOf($(this).text())+>+-1;+//Options+text+exists+in+array
++++}).prop('selected',+true);+//Set+selected|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|317053|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>var groups = ["Test", "Prof","Off"];

    $('#fruits option').filter(function() {
      return groups.indexOf($(this).text()) &gt; -1; //Options text exists in array
    }).prop('selected', true); //Set selected
</code></pre>


blocks|key|317072|text|纯JavaScript+ES5解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|317073|出于某种原因，你不使用jQuery或ES6？这可能会对你有所帮助：|317074|​|317075|var+values+=+"Test,Prof,Off";
var+splitValues+=+values.split(',');
var+multi+=+document.getElementById('strings');

multi.value+=+null;+//+Reset+pre-selected+options+(just+in+case)
var+multiLen+=+multi.options.length;
for+(var+i+=+0;+i+<+multiLen;+i%2B%2B)+{
++if+(splitValues.indexOf(multi.options[i].value)+>=+0)+{
++++multi.options[i].selected+=+true;
++}
}|code-block|syntax|javascript|317076|<select+name='strings'+id="strings"+multiple+style="width:100px;">
++++<option+value="Test">Test</option>
++++<option+value="Prof">Prof</option>
++++<option+value="Live">Live</option>
++++<option+value="Off">Off</option>
++++<option+value="On"+selected>On</option>
</select>|317077|317078|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|S|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|H|7|T|8|@]|9|@]|A|$I|J]]|$1|M|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<h1>Pure JavaScript ES5 solution</h1>

<p>For some reason you don't use jQuery nor ES6? This might help you:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var values = "Test,Prof,Off";
var splitValues = values.split(',');
var multi = document.getElementById('strings');

multi.value = null; // Reset pre-selected options (just in case)
var multiLen = multi.options.length;
for (var i = 0; i &lt; multiLen; i++) {
  if (splitValues.indexOf(multi.options[i].value) &gt;= 0) {
    multi.options[i].selected = true;
  }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select name='strings' id="strings" multiple style="width:100px;"&gt;
    &lt;option value="Test"&gt;Test&lt;/option&gt;
    &lt;option value="Prof"&gt;Prof&lt;/option&gt;
    &lt;option value="Live"&gt;Live&lt;/option&gt;
    &lt;option value="Off"&gt;Off&lt;/option&gt;
    &lt;option value="On" selected&gt;On&lt;/option&gt;
&lt;/select&gt;</code></pre>
</div>
</div>
</p>


blocks|key|100104|text|这是replace+%7C的某些答案中的错误|type|unstyled|depth|inlineStyleRanges|entityRanges|data|100105|var+mystring+=+"this%7Cis%7Ca%7Ctest";
mystring+=+mystring.replace(/%7C/g,+"");
alert(mystring);|code-block|syntax|javascript|100106|此更正是正确的，但%7C最终应如下所示|100107|var+mystring+=+"this%7Cis%7Ca%7Ctest";
mystring+=+mystring.replace(/\%7C/g,+"");
alert(mystring);|100108|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>I have a multiple select:</p>

<pre><code>&lt;select name='strings' id="strings" multiple style="width:100px;"&gt;
    &lt;option value="Test"&gt;Test&lt;/option&gt;
    &lt;option value="Prof"&gt;Prof&lt;/option&gt;
    &lt;option value="Live"&gt;Live&lt;/option&gt;
    &lt;option value="Off"&gt;Off&lt;/option&gt;
    &lt;option value="On"&gt;On&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>I load data from my database. Then I have a string like this:</p>

<pre><code>var values="Test,Prof,Off";
</code></pre>

<p>How can I set this Values in the multiple select? Already tried change the string in an array and put it as value in the multiple, but doesnt work...!
Can someone help me with this? THANKS!!!</p>


Javascript/jQuery: Set Values (Selection) in a multiple Select

数据库

jQuery

我有多项选择：<select name='strings' id="strings" multiple style="width:100px;">    <option value="Test">Test</option>    <option value="Prof">Prof</option>    <option...

问Javascript/jQuery:在多选中设置值(选择)
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript/jQuery:在多选中设置值(选择)EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript/jQuery:在多选中设置值(选择)
EN