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

Question

I am writing a code for a form with a select box in it that has to get populated by the content of a specific html part. I managed to get an id on the specific part (it gets created automatically by the cms) so you can call up the part with javascript.

Problem is i cant figure out how to get the content split by commas like "red, blue, yellow" and split it up into a select box as options.

Here is the part of the javascript code that i have:

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

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

and the html part:

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

I know its not much, I'm still learning javascript but i really cant figure out how to get the content of a specific html part that is split by commas and seperate them into values to populate the selectbox with.

Answer 1

Try

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

Use this code using jquery..

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

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

Answer 3

Using Pure JS, you can use .split(",") to put the split values in an array, then iterate through the array creating option elements:

<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);
    }
}

Demo: http://jsfiddle.net/fvDPh/

Answer 4

You can split a string with 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>
});