need help in adding options to select using javascript

Question

I have a page layout like the below and I need to set values in <select> as I have a form.

<form action="add.jsp">
    <input name="title" id="title"/>
    <input name="company" id="company" />           
    <select name="options" id="options">

    </select>           
    <button>Submit</button>

</form>

I want to add values to above <select/> from the checkboxes out side of the form which are

<input id="input-checkbox-1" name="input-checkbox" type="checkbox">Option 1
<input id="input-checkbox-2" name="input-checkbox" type="checkbox">Option 2
<input id="input-checkbox-3" name="input-checkbox" type="checkbox">Option 3

now don't have any idea of how to get values from checkboxes and add options to select using jQuery.

Thriggle · Accepted Answer · 2016-05-03 19:35:06Z

1

now don't have any idea of how to get values from checkboxes and add options to select using jQuery.

First, to get an HTML element, you can use $("css selector"), document.getElementById("id value"), or document.querySelector("css selector").

Here's a CSS selector syntax reference: http://www.w3.org/TR/selectors/#selectors

Next, to retrieve the value of a checkbox, you can refer to the .checked property of the element. It will be true if the box is checked and false otherwise.

document.querySelector("input").addEventListener("change",function(){
  alert(this.checked);
});

<input type="checkbox" />Check me

Finally, to add a value to a select element, create an option element, set its text and value, and add it to the select.

var select = document.querySelector("select");
var checkboxes = document.querySelectorAll('[type="checkbox"]');
for(var i = 0, len = checkboxes.length; i < len; i++){
  checkboxes[i].addEventListener("change",addOrRemoveMe);
}
function addOrRemoveMe(){
  if(this.checked){
    var option = document.createElement("option");
    option.value = this.name;
    option.text = this.name;
    select.appendChild(option);
  }else{
    select.removeChild(select.querySelector('[value="'+this.name+'"]'));
  }
}

<input type="checkbox" name="One"/> One<br/>
<input type="checkbox" name="Two"/> Two<br/>
<input type="checkbox" name="Three"/> Three<br/>
<select></select>

edited May 3, 2016 at 19:35

answered Oct 8, 2015 at 4:04

Thriggle

7,0692 gold badges29 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user5205380 Over a year ago

Thanks for great help, but when I submit the form I con't get values from the select box, I guess those values are not selected as I'm setting it as a hidden field, how can I make those options selected.

Arshad Ali Over a year ago

Add One line option.selected = 'selected'; after option.text = this.name;, I hope this solves issue.

user5205380 Over a year ago

@ArshadAli as you said it Solved my issue, thanks to Thriggle, he saved my life.

Collectives™ on Stack Overflow

need help in adding options to select using javascript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related