需要帮助添加使用javascript选择的选项

Question

我有一个如下所示的页面布局，我需要在<select>中设置值，因为我有一个表单。

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

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

</form>

我想从表单的复选框旁边的<select/>添加值

<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

现在不知道如何从复选框中获取值并添加使用jQuery选择的选项。

Answer 1

  

现在不知道如何从复选框中获取值并添加选项以使用jQuery进行选择。

首先，要获取HTML元素，您可以使用$("css selector")，document.getElementById("id value")或document.querySelector("css selector")。

这是一个CSS选择器语法参考：http://www.w3.org/TR/selectors/#selectors

接下来，要检索复选框的值，可以参考元素的.checked属性。如果选中该框，则为true，否则为false。

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

<input type="checkbox" />Check me

最后，要为select元素添加值，请创建option元素，设置其文本和值，然后将其添加到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>