Question

我有两个下拉菜单，我想要它，以便当用户更改第一个下拉列表时，第二个下拉列表会自动更新为相同的值。由于一些复杂的原因，我必须通过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，则看起来{ {1}}正确引用第二个下拉列表，而不是this。（另外，如果我尝试显示body，则表示它是＆＃34; HTML selectElement＆＃34;）。

发生了什么？

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>

Answer 2

只需更改此行

即可

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

到这个

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

Answer 3

只需根据第一个值的值设置部分下拉列表的值。

$("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>

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

3 个答案: