コンボボックスjquery onchangeイベント

Question

コンボボックスを別のコンボボックスに基づいてどのように更新すればいいですか？このコードはありますが、動作しません。おかげ

<select name="marca" id="marca" onchange="javascript:carregaModelos(this.value)" > 
    <option th:each="marca : ${marcas}" 
     th:value="${marca.idmarca}" 
     th:text="${marca.nomemarca}">Marca</option> 
</select> 

    <select name="modelo" id="modelo"> 
    <option th:each="modelo : ${modelos}" 
     th:value="${idmodelo}" 
     th:text="${nomemodelo}">Modelo</option> 
    </select> 


<script type="text/javascript">  
    function carregaModelos(marca) { 
var opcao = $(this).('#marca option') 
console.log(opcao); 
jQuery("#modelo").load("pesquisa/" + opcao); 
return false; 


} 

この

@RequestMapping("/pesquisa/{idmarca}") 
    public String pesquisa(ModelMap model, @PathVariable Long idmarca) { 
     model.addAttribute("modelo", service.obterModelosByMarcas(idmarca)); 
     return "index"; 

Answer 1

は、要素をターゲットとする値と属性を追加します。

data-target-sync="#targetElementId"

値は、ターゲット要素のIDに含まれているjQueryのセレクタので#ある

$(document).ready(function() { 
 

 
    $('[data-target-sync]').change(function() { 
 

 
    var cur = $(this); 
 

 
    $(cur.attr('data-target-sync')).val(cur.val()); 
 

 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<select name="marca" id="marca" data-target-sync="#modelo"> 
 
    <option value="a">A</option> 
 
    <option value="b">B</option> 
 
    <option value="c">C</option> 
 

 

 
</select> 
 

 
<select name="modelo" data-target-sync="#marca" id="modelo"> 
 
    <option value="a">A</option> 
 
    <option value="b">B</option> 
 
    <option value="c">C</option> 
 

 
</select>