Question

请告诉我，其中有一个代码，当您单击选项选择时，将添加一个带有选项值的div元素。但是有一个问题，那就是您不能立即单击第一个选项，您必须先单击第二个，而只能单击第一个。如何解决这个问题？预先谢谢你。

var p = document.getElementById("inputi");
var length = 1;

function add_input_from_select(select) {
  var new_input = document.createElement("input");
  new_input.name = "my_input";
  new_input.value = select.value;
  var div = document.createElement('div');
  div.innerHTML = '<br>div элемент №' + length + '<br>';
  div.appendChild(new_input);
  p.appendChild(div);
  length++;
}

function add_input_old() {
  add_input_from_select(document.getElementById("selector"));
}

<select id="selector" onchange="add_input_from_select(this)">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>
<br>
<form>
  <div id="inputi"><input name="my_input"></div>
</form>

Answer 1

在html下拉列表中，您无法选择已选择的值，因此必须在下拉列表中添加另一个选项，即“请选择”，然后您可以选择任何选项。那是正确的解决方案

请参阅工作示例：-

var p = document.getElementById("inputi");
var length = 1;

function add_input_from_select(select) {
  var new_input = document.createElement("input");
  new_input.name = "my_input";
  new_input.value = select.value;
  if(!new_input.value) return false;
  var div = document.createElement('div');
  div.innerHTML = '<br>div элемент №' + length + '<br>';
  div.appendChild(new_input);
  p.appendChild(div);
  length++;
}

function add_input_old() {
  add_input_from_select(document.getElementById("selector"));
}

<select id="selector" onchange="add_input_from_select(this)">
  <option value="">Please Select</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>
<br>
<form>
  <div id="inputi"><input name="my_input"></div>
</form>

Answer 2

发生这种情况是因为您使用onchange事件完成了此操作，因此已经选择了第一个选项，这就是为什么它第一次不添加div的原因，因此，只需在html上再添加一个选项就可以了

<select id="selector" onchange="add_input_from_select(this)">
  <option value="">select Option</option> 
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

并将条件放在javascript之类的

if(document.getElementById("selector").value != ""){
    //add your div here
}

此条件必须适用，因为当您选择第一个选项时，它并未像选择选项一样被添加。

单击第一个选项js

2 个答案: