jQuery 循环选择语句中的数据并保存预选选项

Question

我有一个管理页面，其中列出了一组不同的汽车，管理员可以点击编辑按钮并更新其中一辆汽车。当这种情况发生时，汽车将以可以进行更改的模式形式显示。该表单在模式中有一个保存和取消按钮。

可以更新的各种内容都是典型的汽车内容，例如年份、品牌、型号、装饰级别、颜色、年份等。例如，可以更新有关该项目的内容之一是颜色，以及带有列出了该型号提供的颜色。 Select 由 SQL 查询填充。

问题：如何在模式的表单元素中预先选择已保存的车辆颜色？就像列表中这辆特定汽车的颜色被列为 TorRed 一样，它应该是辛烷红，并且管理员想要更新此特定汽车的颜色。

它是使用 jQuery 的数据表，中间件是 Coldfusion，数据存储在 SQL Server 数据库中。

<i class="fa fa-pencil-square-o edit-button" aria-hidden="true" title="Edit Car" data-carid="#CarID#" data-carmake="#CarMake#" data-carmodel="#CarModel#" data-trimlevel="#TrimLevel# data-year="#Year#" data-colorname="#ColorName#" data-colorid="#ColorID#" data-isactive="#isActive#"></i>


$(document).ready(function(){
        $(document).on('hidden.bs.modal', '.modal', function () {
            $(this).removeData('bs.modal');
            const modalForm = document.querySelector('#ModalForm');
            $('#CarID').val('');
            modalForm.reset();                
        });
        loadData();

        $(document).on('shown.bs.modal', '.modal', function () {
            $('#CarMake').focus();
        })

        $('#data_grid_display').on('click', '.edit-button', function(e) {
            e.preventDefault();
            const ColorID = $(this).data('colorid');
            const ColorName = $(this).data('colorname');
            const isActive = $(this).data('isactive');
            $('#ColorID').val(ColorID);
            $('#ColorName').val(ColorName);
            const isActiveChecked = isActive ? true : false;
            $('#isActive').prop('checked',isActiveChecked);
            $('#TheModal').modal('show');
        });


//The Select statement in the form on the modal
<cfoutput>
<select name="ColorID" class="frmcontrol" placeholder="Car Color">
   <option value="" Selected>--- Select ---</option>
   <cfloop query="GetColors">
      <option value="#ColorID#">#ColorName#</option>
   </cfloop>    
</select>
</cfoutput>

Answer 1

我在工作中得到了帮助来解决这个问题。这就是我需要的全部 jQuery。

    $('#ColorID > option').each(function() {
       if ($(this).val() == ColorID){
          $(this).attr("selected", "selected");
       }
    });