Populating a selectbox from html content split by commas

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.

Possible duplicate: http://stackoverflow.com/questions/14523963/populating-a-drop-down-box-with-a-variable-containing-comma-seperated-values — emerson.marini, Jul 25 '13 at 15:06

Suresh Atta · Answer 1 · 2013-07-25T15:57:45.883

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

edited Jul 25 '13 at 15:57

answered Jul 25 '13 at 15:06

Suresh Atta

120,458
37
198
307

The author didn't ask for a jQuery solution. – Nadh Jul 25 '13 at 15:11
@Nadh jQUERY tag is there.If no.Sure I'l delete my post. – Suresh Atta Jul 25 '13 at 15:12
@nadh sure they did, they tagged it jquery. i actually changed my answer from pure js to jquery for that reason. – user428517 Jul 25 '13 at 15:13
Thanks for the solution.. and yes I dont mind using either jquery or javascript :) im just getting a lil problem in the console TypeError: cannot call method 'text' of null, i did put the script all the way at the bottom to make sure its not loading first before the html itself is in – Jasper Doornbos Jul 25 '13 at 15:56
wrap your code in `document.ready` http://learn.jquery.com/using-jquery-core/document-ready/ – Suresh Atta Jul 25 '13 at 16:03
1

I'll keep that in mind for next time I run into this problem, thank you :) for now i replaced your code with the pure javascript answer and got it working. – Jasper Doornbos Jul 25 '13 at 16:11

score 1 · Answer 2 · answered Jul 25 '13 at 15:07

1

Use this code using jquery..

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

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

answered Jul 25 '13 at 15:07

Anand Shah

611
7
14

score 1 · Accepted Answer · answered Jul 25 '13 at 15:09

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/

Thank you so much :) I ended up using this solution and it works perfectly, also figured out a bit more how it all works for whenever I have to use it again so it was helpful to me. — Jasper Doornbos, Jul 25 '13 at 16:07

user428517 · Answer 4 · 2013-07-25T15:17:39.400

0

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

edited Jul 25 '13 at 15:17

answered Jul 25 '13 at 15:10

user428517

4,132
1
22
39

Populating a selectbox from html content split by commas

4 Answers4