How to populate a form list with buttons using javascript

Question

I made a script that, when you press one button(accessories) the selection(mylist) populates with one array(accessoryData), and when you hit the other button(weapons) the other array(weaponData) populates the selection. However, in the current state of the code the second button press is not re-populating the selection. What is wrong here?

Also if there is a more efficient way to do this, that might be helpful.

Full code

function runList(form, test) {
    var html = "";
    var x;
    dataType(test);
    while (x < dataType.length) {
        html += "<option>" + dataType[x];
        x++;
    }
    document.getElementById("mylist").innerHTML = html;
}

Are you constrained to just Javascript? I would suggest using the jQuery library. — Austin Brunkhorst
– Austin Brunkhorst, Commented Jun 12, 2012 at 22:35
I have never used jQuery. How much would it take to be able to implement it into what I already have? — StealingMana
– StealingMana, Commented Jun 12, 2012 at 22:36
It's actually much easier than bare javascript. Here's a quick implementation based off what I saw you trying to do, in jQuery - jsfiddle.net/u4fcz. If you have any questions I'll be glad to help. — Austin Brunkhorst
– Austin Brunkhorst, Commented Jun 12, 2012 at 22:54
Do you know how to code the equivalent in JavaScript? I don't understand the syntax. But that is the exact result I'm looking for. — StealingMana
– StealingMana, Commented Jun 12, 2012 at 23:48
What are those variables you're passing to the function? Also, you could rewrite that while loop with a for loop: for(var i = 0; i < dataType.length; i++) If you really want to write some cool JS then I would also suggest sitting down and learning jQuery. It takes a bit to get used to but it makes your life so much easier in the long run :) — Mike Cluck
– Mike Cluck, Commented Jun 13, 2012 at 0:05

ShouravBR · Accepted Answer · 2012-06-13 10:37:24Z

I believe you are trying to make a <select> element ie the drop down menu, but proper markup is:

<select id="myList">
   <option value="1">Option 1</option>
   <option value="2">Option 2</option>
   <option value="n">Option n</option>
</select>

You forgot to close the <option> tag with innerHTML property.

Using native JS methods:

//create the select element
var select = document.create('select');
//or use getElementById if it's already there

//Assuming your datatype is an Array of string
var opt;
for(var i=0; i<datatype.length; i++){
  //create the option element
  opt = document.create('option');
  opt.textContent = datatype[i]; //innerText works too
  //set the value attribute
  opt.setAttribute('value',i+1); //+1 or else it would start from 0
  //add the option to the select element
  select.appendChild(opt);
  //conversely use removeChild to remove
}

//at last add it to the DOM if you didn't fetch it from the DOM.

Collectives™ on Stack Overflow

How to populate a form list with buttons using javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related