Question

我正在为一个带有选择框的表单编写代码，该表单必须由特定html部分的内容填充。我设法获得特定部分的ID（它由cms自动创建），因此您可以使用javascript调用该部分。

问题是我无法弄清楚如何用“红色，蓝色，黄色”之类的逗号分割内容，并将其拆分为选项框作为选项。

以下是我所拥有的javascript代码的一部分：

    function offerte(){
    var kleuren = document.getElementById('product_kleuren'); 

// here has to come a code to populate the select box
    }

和html部分：

    <div><span class="extra_fields_name">Kleuren</span>:
    <span id="product_kleuren" class="extra_fields_value">Naturel, Helder, Zwart</span></div>

    <label class="offerte_lbl">Kleur: </label><select id='kleuren'  class='offerte_input'></select><br>

我知道它不多，我还在学习javascript，但我真的无法弄清楚如何获取用逗号分割的特定html部分的内容，并将它们分成值以填充选择框。

Answer 1

尝试

var kleuren = $('#product_kleuren').text(); 
var splitter = kleuren.split(',');
var options = '';
for(var i = 0; i < splitter.length; i++)
{

 options += '<option value="' + splitter[i] + '">' + splitter[i]+  '</option>';
}
$('#kleuren').html(options);

Answer 2

使用jquery ..

使用此代码

var arr = $("#product_kleuren").split(",");

for(var i=0;i<arr.length;i++)
$("#kleuren").append("<option>"+arr[i]+"</option>");

Answer 3

使用Pure JS，您可以使用.split(",")将拆分值放入数组中，然后遍历创建option元素的数组：

<select id="someSelect"></select>

JS

function offerte(){
    var kleuren = document.getElementById('product_kleuren');
    var parts = kleuren.innerHTML.split(",");

    for (var i = 0; i < parts.length; i++) {
        var option = document.createElement("option");
        option.text = parts[i];
        option.value = i;
        document.getElementById("someSelect").appendChild(option);
    }
}

演示：http://jsfiddle.net/fvDPh/

Answer 4

您可以使用String.split分割字符串：

//split the words into an array called "words"
var words = kleuren.split(',');

//iterate through the words with jQuery.each()
$(words).each(function() {
    word = this.trim();   //trim any extra whitespace from the word

    //now you can add the word as an option to the <select>
});

从用逗号分割的html内容填充选择框

4 个答案: