Question

我需要一些帮助，我尝试用用户输入更新选择选项，但它只显示空选项。这是我的代码和jsfiddle链接

$("#select").append($("<option></option>").val("Clothes").html("Clothes"));

$("#butt").click(function() {
  var bla = $('#category').val();
  var valll = $('#category').attr('value');
  $("#select").append($("<option></option>").val(valll).html(valll));
});

<input type="text" placeholder="Category" name="category_name" id="category" />
<button class="btn btn-primary" name="add_category" id="butt">Add</button>
<select id="select"></select>

jsfiddle link

Answer 1

$('#category').attr('value')不会返回当前值。请试试这个：

$("#butt").click(function() {
  var value = $('#category').val();
  $("#select").append($("<option></option>").val(value).text(value));
});

＆＃13;

$("#select").append($("<option></option>").val("Clothes").html("Clothes"));

$("#butt").click(function() {
  var value = $('#category').val();
  $("#select").append($("<option></option>").val(value).text(value));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" placeholder="Category" name="category_name" id="category" />
<button class="btn btn-primary" name="add_category" id="butt">Add</button>
<select id="select"></select>

＆＃13;

Answer 2

请查看更新的jsfiddle

<强>的Javascript

$("#select").append($("<option></option>").val("Clothes").html("Clothes"));

$("#butt").click(function(){
   var bla = $('#category').val();
   alert(bla);     
   $("#select").append($("<option></option>").prop("value",bla).html(bla));
});

<强> HTML

  <input type="text" placeholder="Category" name="category_name" id="category"/>
  <button class="btn btn-primary" name="add_category" id="butt">Add</button>
  <select id="select"></select>

Jquery动态更新输入中的select

2 个答案: