CODEWITHSUNDEEP
javascriptsplit
Aseem Sharma
Aseem Sharma

Reputation: 149

Javascript - remove split method

I am trying to create the select application using Javascipt only. I got to know about this code on internet and it uses the split method to return value and .innerHTML. Now say if I do not want to use the split method and just return with .innerHTML into html element with no value, how to do that using for loop as used in this code ?

   <!DOCTYPE html>
<html>
<head>
    <title>Select Options</title>
</head>
<body>

<h2>Choose your car</h2>
<hr>

Choose Car Make:
<select id="slct1" onchange="populate(this.id,'slct2')">
    <option value=""></option>
    <option value="Hyundai">Hyundai</option>
    <option value="Honda">Honda</option>
    <option value="Maruti">Maruti</option>
</select>

<hr>

Choose Car Model
<select id="slct2" ></select>

</body>

<script type="text/javascript">
    function populate(s1,s2){
        var s1 = document.getElementById(s1);
        var s2 = document.getElementById(s2);
        s2.innerHTML = "";

        if(s1.value == "Hyundai") {
            var optionArray = ["|", "i10|i10","i20|i20", "Verna|Verna"]
        }
        for(var option in optionArray){
            var pair = optionArray[option].split("|");
            var newOption = document.createElement('option');
            newOption.value = pair[0];
            newOption.innerHTML = pair[1];
            s2.options.add(newOption);
        }
    }
</script>

</html>

Upvotes: 2

Views: 902

Answers (3)

kind user
kind user

Reputation: 41893

You have to be aware, that using for... in loop over an array, won't return you the elements actually, but their indexes. I would suggest you to use simple for loop instead.

function populate(s1, s2) {
  var s1 = document.getElementById(s1);
  var s2 = document.getElementById(s2);
  s2.innerHTML = "";
  
  var optionArray = ["i10", "i20", "Verna"];
    
  for (var i = 0; i < optionArray.length; i++) {
    var newOption = document.createElement('option');
    newOption.value = optionArray[i];
    newOption.innerHTML = optionArray[i];
    s2.appendChild(newOption);
  }
}
<h2>Choose your car</h2>
<hr> Choose Car Make:
<select id="slct1" onchange="populate('slct1','slct2')">
    <option value=""></option>
    <option value="Hyundai">Hyundai</option>
    <option value="Honda">Honda</option>
    <option value="Maruti">Maruti</option>
</select>

<hr> Choose Car Model
<select id="slct2"></select>

Upvotes: 1

Dan Philip Bejoy
Dan Philip Bejoy

Reputation: 4391

Left value to "" to keep it empty.

for(var option in optionArray){
   var text = optionArray[option];
   var newOption = document.createElement('option');
   newOption.value = "";
   newOption.innerHTML = text;
   s2.options.add(newOption, null);
}

Upvotes: 1

Saurabh Tiwari
Saurabh Tiwari

Reputation: 5151

Removing or simply commenting (may be you would require it in future) few lines should do what you want:

<script type="text/javascript">
    function populate(s1,s2){
        var s1 = document.getElementById(s1);
        var s2 = document.getElementById(s2);
        s2.innerHTML = "";

        if(s1.value == "Hyundai") {
            var optionArray = ["|", "i10|i10","i20|i20", "Verna|Verna"]
        }
        for(var option in optionArray){
            var pair = optionArray[option]; //.split("|");
            var newOption = document.createElement('option');
            newOption.value = pair; //[0];
            newOption.innerHTML = pair; //[1];
            s2.options.add(newOption);
        }
    }
</script>

With above code, you are no using .split() and just assigning the whole object to the new element.

Upvotes: 1

Related Questions