动态更改选项然后 Select 选项

Question

我现在可以使用 jQuery 动态更改选项。 下面的代码将根据所选物种更改品种选项：

<div class="pet-group">
    <div class="form-group">
        <select class="species">
            <option value="1">Dog</option>
            <option value="2">Cat</option>
        </select>
    </div>
    <div class="form-group">
        <select class="breed">
        </select>
    </div>
</div>

<script>
    $(document).on("change", ".species", function(){
        var elem = $(this),
            speciesid = elem.val();
        $.get("http://localhost/Vet/get_breeds/"+speciesid, function( result ) {
            elem.closest('.form-group').find('.breed').html(result.breed_opts);
        }, "json" );
    });
</script>

---

But when a specific pet has been selected, I want the fields to be filled-in with data of the existing pet.

<div class="pet-group">
    <div class="form-group">
        <select class="pet">
            <option value="1">Akamaru</option> <!-- e.g., Akamaru is a dog with Pug as the breed type -->
            <option value="2">Nina</option> <!-- e.g., Nina is a dog with Great Pyrenees as the breed type -->
        </select>
    </div>
    <div class="form-group">
        <select class="species">
            <option value="1">Dog</option>
            <option value="2">Cat</option>
        </select>
    </div>
    <div class="form-group">
        <select class="breed">
        </select>
    </div>
</div>

<script>
    $(".pet").change(function(){
        var elem = $(this),
            petid = elem.val();

        $.get("http://localhost/Vet/get_pet_details/"+petid, function( result ) {
            elem.closest('.pet-group').find('.species').val(result.species_id).trigger('change');
            elem.closest('.pet-group').find('.breed').val(result.breed_id).trigger('change');
        });
    });
</script>

它确实会正确更改物种字段并动态加载品种选项，但它不会 select 正确的品种。

我应该怎么做才能选择合适的品种？

Answer 1

选择特定宠物后，$.get("http://localhost/Vet/get_pet_details/"...) 回调按以下顺序执行：

第一步：设置select.species的值：

elem.closest('.pet-group').find('.species').val(result.species_id)

第二步：设置select.breed的值：

elem.closest('.pet-group').find('.breed').val(result.breed_id)

第 3 步：调用 select.species 的异步事件处理程序，因为

elem.closest('.pet-group').find('.species').trigger("change");

Ajax 得到新的 result.breed_opts，并填充 select.breed。 步骤 2 中设置的旧值将被删除。

因此，我们可以在您的第一个脚本正文中执行此方法：

<script>
    $(document).on("change", ".species", function(){
        var elem = $(this),
            speciesid = elem.val();
         $.get("http://localhost/Vet/get_breeds/"+speciesid, function( result ) {
             var objbreed = elem.closest('.pet-group').find('.breed');
             var oldbreedid = objbreed.val();
             objbreed.html(result.breed_opts);
             if(oldbreedid) {
                objbreed.val(oldbreedid);
             }
        }, "json" );
    });
</script>

在更新 select.breed 的 html 后，我们恢复之前选择的值，即步骤 2 的值。