Question

我有一个下拉菜单：代码。 “代码”的选项来自数据库，并填充下拉列表。我有一个文本框：名字。对于在Name中填充的某些值（再次从数据库中），我想用我自己的选项集替换下拉菜单选项，基本上覆盖已经存在的选项。有没有办法做到这一点？

我的代码： HTML：

 <div>
    <table>
    <tbody><tr><td><label>Code</label></td><td>
    <select class="codeSelection"></select></td></tr>
    </tbody>
    </table>                            
</div>

<div>
 <table>
  <tbody><tr><td><label>Name</label></td>
    <td><input type="text" class="nameInput"></td></tr>
  </tbody>
 </table>                            
</div>

到目前为止我尝试过的代码:(跟How do I add options to a DropDownList using jQuery?）

$('.nameInput').html("");
$('.nameInput').val(data[0].codeValue);
    if ($('.nameInput').val() =="Smith")
            {
                var myOptions = {
                    val1 : "Tom",
                    val2 : "John"
                            };
                    $.each(myOptions, function(val, text){
                    $('.codeSelection').append($('<option></option>').val(val).html(text));
                            });
            }

这仍然给我旧的下拉列表，只显示值“Tom”和“John”作为文本。

Answer 1

以下代码将读取您的文本框值并通过下拉列表中的选项循环并根据需要进行更新。根据需要进行更改。

  var txtVal=$("#nameInput").val();

  $("#codeSelection option").each(function() {
    var _item=$(this);  
    console.log(_item.val());
    if(_item.val()===txtVal)
     {
         //_item is the one you want. Make the changes as needed.
         // Here i am updating the value and text.
         _item.val("newValue").text("NewName");
     }
   });

工作样本：http://jsbin.com/zexapizabe/2/

Answer 2

您只需要在追加之前清除您的选项：

$('.codeSelection option').remove();

如果你想看到它的实际效果，下面会有一个可运行的代码片段。单击该名称后，下拉选项将立即更改。

＆＃13;

$('.nameInput').on("blur", function() {

  	if ($('.nameInput').val() =="Smith") {
		var myOptions = {
			val1 : "Tom",
			val2 : "John"
		};
		
		$('.codeSelection option').remove();
		$.each(myOptions, function(val, text){
			$('.codeSelection').append($('<option></option>').val(val).html(text));
		});
	}
});

$(function() {
    $(".nameInput").get(0).focus();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <div>
    <table>
    <tbody><tr><td><label>Code</label></td><td>
    <select class="codeSelection">
      <option>Name One</option>  
    </select></td></tr>
    </tbody>
    </table>                            
</div>

<div>
 <table>
  <tbody><tr><td><label>Name</label></td>
    <td><input type="text" class="nameInput" value="Smith"></td></tr>
  </tbody>
 </table>                            
</div>

＆＃13;

如何使用JQuery用自己的选项替换下拉菜单选项？

2 个答案: