Question

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

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

select{
  display: block;
  margin-top: 15px;
}

<input type="number">
<select>
<option> test 1 </option>
<option> test 2 </option>
<option> test 3 </option>
</select>

Answer 1

我不确定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时，选择元素将更改。

Answer 2

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

您提到了克隆...您可以使用一种称为.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>

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

2 个答案: