javascript - Jquery:通过委托(delegate)事件触发时更改下拉列表的值

Question

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

<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/ 创建了一个 fiddle

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

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

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

发生什么事了？

Answer 1

在您的 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>