Jquery:更改下拉列表的值.通过委托事件触发时

Jquery: change value of a dropdown... when triggered through a delegate event

本文关键字：事件 下拉列表 Jquery      更新时间：2023-09-26

>我有两个下拉列表，我希望当用户更改第一个下拉列表时，第二个下拉列表会自动更新为相同的值。由于一些复杂的原因，我必须通过on()委托事件触发更改。我的代码是这样的：

<form>
    <select id="destino_1">
    <option value="268">AAA</option>
    <option value="409">BBB</option>
    <option value="570">CCC</option>
    <option value="895">DDD</option>
     <option value="943">Arena</option>
    </select>
<select id="origen_2" class="origen">
<option value="268">AAA</option>
<option value="409">BBB</option>
<option value="570">CCC</option>
<option value="895">DDD</option>
<option value="943">Arena</option>
    </select>
</form>

我的Javascript是这样的：

   $("body").on('change',"#destino_1", function(){ 
      $("#origen_2").trigger("cambiaOrigen");
   });

$('body').on('cambiaOrigen', '.origen', function() {
    var nombre=this.id;
    var numero=parseInt(nombre.slice(-1));
    //alert("Mooooo " + nombre);
    if (numero > 1) {
        var anterior = $("#destino_" + (numero - 1)).val();
        this.find("option[value='" + anterior + "']").prop("selected", "selected").change();
        //this.val(anterior);
        }
    });

我在 http://jsfiddle.net/w7c4o4cd/创造了一个小提琴

如您所见，事件被正确触发，代码获取第一个下拉列表的值......但是我无法更改第二个下拉列表的值。我尝试了两种方式：与 

this.find("option[value='" + anterior + "']").prop("selected", "selected").change();

还有this.val(anterior);.他们都不起作用。在浏览器中执行时，我在控制台中遇到的错误是this.find和this.val()不是函数......然而，如果您尝试显示 this.id ，似乎this正确地引用了第二个下拉列表，而不是说，body .（另外，如果我尝试显示this，它说它是一个"HTML selectElement"）。

这是怎么回事？

在你的cambiaOrigen处理程序中，this指的是一个节点而不是一个jQuery对象，你想要的是$(this)。
此外，要设置select标签的选定选项，您只需设置其值即可

this.value = anterior;

http://jsfiddle.net/mowglisanu/w7c4o4cd/2/

   $("body").on('change',"#destino_1", function(){ $("#origen_2").trigger("cambiaOrigen");
       
   });
$('body').on('cambiaOrigen', '.origen', function() {
	var nombre=this.id;
	var numero=parseInt(nombre.slice(-1));
	//alert("Mooooo " + nombre);
	if (numero > 1) {
		var anterior = $("#destino_" + (numero - 1)).val();
		//alert("Meeeept " + anterior);
        //alert (this);
		this.value = anterior;
		//this.val(anterior);
		}
	});	
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form>
    
    <select id="destino_1">
    <option value="268">AAA</option><option value="409">BBB</option><option value="570">CCC</option><option value="895">DDD</option><option value="943">Arena</option>
    </select>
<select id="origen_2" class="origen">
<option value="268">AAA</option><option value="409">BBB</option><option value="570">CCC</option><option value="895">DDD</option><option value="943">Arena</option>
    </select>
</form>

只需更改此行

this.find("option[value='" + anterior + "']").prop("selected", "selected").change();

对此

$(this).find("option[value='" + anterior + "']").prop("selected", "selected").change();

只需像这样根据第一个的值设置部分下拉列表的值即可。

$("body").on('change', "#destino_1", function () {
   $('#origen_2').val($(this).val());
});


   $("body").on('change', "#destino_1", function () {
       $('#origen_2').val($(this).val());
   });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <select id="destino_1">
        <option value="268">AAA</option>
        <option value="409">BBB</option>
        <option value="570">CCC</option>
        <option value="895">DDD</option>
        <option value="943">Arena</option>
    </select>
    <select id="origen_2" class="origen">
        <option value="268">AAA</option>
        <option value="409">BBB</option>
        <option value="570">CCC</option>
        <option value="895">DDD</option>
        <option value="943">Arena</option>
    </select>
</form>

相关文章：