jQuery:如何在 jQuery 对话框中设置选择？

Question

我的问题是如何将所选选项预设到所单击项目的相应部门？

更新:

我尝试了@Ryan Wilson的解决方案，我可以看到旧的“selected”属性被删除，新的属性被添加到HTML中， 但不知道为什么界面仍然显示旧的“已选择”

这是我的js。我正在使用jQuery dialog

$(function () {
  let dialog, form;

  function updateInfo() {
    //update item name
    let newItemName = $('#item-name').val();
    $(clickedItemName)[0].innerText = newItemName;

    //update item's department name
    let newDepartmentName = $('#select-department').find(":selected").text();
    $(currentDepartment)[0].innerText = newDepartmentName;
    dialog.dialog( "close" );
  };

  dialog = $('#dialog-form').dialog({
    autoOpen: false,
    height: 'auto',
    width: 500,
    modal: true,
    buttons: {
        "Confirm Update": updateInfo,
        Cancel:
        function() {
          if($('#select-department option:selected').length > 0) {
              $('#select-department option:selected').removeAttr("selected");
          }
          dialog.dialog( "close" );
        }
      },
      close: function() {
        form[ 0 ].reset();
      }
  });

  form = dialog.find( "form" ).on( "submit", function( event ) {
    event.preventDefault();
    updateInfo();
  });

  let clickedItemName, currentDepartment, currentDepartmentName;
  $('#items-table').on('click', '.item-name',  function(e) {
    e.preventDefault();
    clickedItemName = e.target
    dialog.dialog( "open" );
    //prefill dialog's item field
    $('#item-name').val($(clickedItemName).text());

    /* --- TODO: pre-set selected --- */
    //find item-department of the same rows
    currentDepartment = $(clickedItemName).closest('tr').find('td.item-department');
    //get clicked item's department name
    currentDepartmentName = currentDepartment.text();
    //remove old selected
    if($('#select-department option:selected').length > 0){
        $('#select-department option:selected').removeAttr("selected");
    }
    //Checks for the option element which contains the department name
    //Then sets the attribute selected to that option
    $("#select-department option:contains(" + currentDepartmentName +
       ")").attr('selected', 'selected');
  })

})

==============================

我有一个表:项目名称是链接。单击任何项​​目名称时，将显示一个带有表单的模式对话框。

模式对话框有一个输入字段，其中预填充了项目名称。一个下拉选择和另一个输入字段。

HTML

<select id="#select-department">
    <option value>Bagel</option>
    <option value>Brownies</option>
    <option value>Milk</option>
</select>

我试过了

let clickedItemName, currentDepartment, currentDepartmentName;
    $('#items-table').on('click', '.item-name',  function(e) {
    e.preventDefault();
    clickedItemName = e.target
    dialog.dialog( "open" );
    //prefill dialog's item field
    $('#item-name').val($(clickedItemName).text());

    /* --- TODO: pre-set selected --- */
    //find item-department of the same rows
    currentDepartment = $(clickedItemName).closest('tr').find('td.item-department');
    //get clicked item's department name
    currentDepartmentName = currentDepartment.text();
    //set the option
    $('#select-department').val(currentDepartmentName)

但是我发现$('#select-department').val(currentDepartmentName)在我的情况下不起作用，因为 <option> 没有值(value).

下拉选择由jsp生成。

          <select id="select-department" class="form-control" name="department">
            <c:if test="${departments.length() > 0}">
              <c:forEach var="i" begin="0" end="${departments.length()-1}">
              <c:set var="department" value="${departments.getJSONObject(i)}"/>
                <option value="" >${department.optString("departmentName")}                        </option>
              </c:forEach>
            </c:if>
          </select>

我试过<option value=${department.optString("departmentName")} >${department.optString("departmentName")}</option> ，但后来我意识到输出 html 截断了第一个空格之后的所有内容。

如果有人能给我指明方向，那就太好了。感谢您的帮助。

Answer 1

更改此行:

$('#select-department').val(currentDepartmentName)

对此:

    //Remove selected attribute of option that has selected attribute
    if($('#select-department option:selected').length > 0){
        $('#select-department option:selected').removeAttr("selected");
    }


    //This checks for the option element which contains the department name
    //Then sets the attribute selected to that option
    $("#select-department option:contains(" + currentDepartmentName + 
       ")").attr('selected', 'selected');

    //Since adding the attribute 'selected' isn't changing the drop down
    //Use .prop
    $("#select-department option:contains(" + currentDepartmentName + 
       ")").prop('selected', true);