根据输入值乘法或克隆选择标签

时间:2018-07-24 19:25:01

标签: javascript jquery

我需要根据输入的值来复制或克隆选择标签。

我不知道要开始...所以,我将感谢“启动器”代码。

select{
  display: block;
  margin-top: 15px;
}
<input type="number">
<select>
<option> test 1 </option>
<option> test 2 </option>
<option> test 3 </option>
</select>

2 个答案:

答案 0 :(得分:0)

我不确定100%,但是我认为这是您的意思:

function change (value) {
  value = Number(value);
  
  if(value ==! 1 || value ==! 2  || value ==! 3) {
    return;
  }
  
  document.getElementById('options').value= value;
}
select{
  display: block;
  margin-top: 15px;
}
<input oninput="change(this.value)" type="number">
<select id="options">
<option value="1"> test 1 </option>
<option value="2"> test 2 </option>
<option value="3"> test 3 </option>
</select>

在此示例中,当您在输入中键入1,2或3时,选择元素将更改。

答案 1 :(得分:0)

«我所需要的全部,基于输入值的选择标记或将其克隆»

您提到了克隆...您可以使用一种称为.clone()的方法。

然后,诀窍是使用输入的值在其上循环.append()

.empty()就像它说的那样,在循环运行前清空要追加元素的容器。

$("input").on("change",function(){
  var value = parseInt($(this).val())-1;
  
  $("#additionnalSelects").empty();
  for(i=0;i<value;i++){
    var clone = $("select").clone();
    $("#additionnalSelects").append(clone);
  }
})
select{
  display: block;
  margin-top: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number">
<select>
<option> test 1 </option>
<option> test 2 </option>
<option> test 3 </option>
</select>
<div id="additionnalSelects"></div>