使用 jQuery 选择列表值更改，但不显示在 UI 中

Select list value change using jQuery but does not shows in UI

本文关键字：显示 UI 选择 jQuery 列表 使用      更新时间：2023-09-26

大家好，在jQuery中更改选择列表选项时遇到问题，在这个主题之外，一切都很好。当我在此主题中创建选择列表时，它正在更改选择列表。主题名称为开发人员

我的代码 ： 

<select id="PackageID" name="PackageID" class="validate[required] withClearFunctions" style="width:200px" >
  <option value="">Please select</option>
  <option value="1">100 paper</option>
  <option value="2">500 paper</option>
</select>

我在兰德之后得到了什么

<span class="drop-down custom-scroll">
  <span class="selected">Please select</span>
  <span>100 paper</span>
  <span>500 paper</span>
  <div class="custom-vscrollbar" style="display: none;"><div></div></div>                           
</span>

当我在jQuery html中更改选项时，但UI没有更改。

选择选择列表后的代码

<span class="drop-down custom-scroll">
  <span>Please select</span>
  <span class="selected">100 paper</span>
  <span>500 paper</span>
  <div class="custom-vscrollbar" style="display: none;"><div>
</span>

我解决了这个问题。我只是使用 jQuery 触发更改事件 

$('#PackageID').change();

此事件更新 UI。

有几种方法可以在没有选择下拉列表的情况下设置选项。请参阅小提琴以获取最简洁/可读的选项

JSFiddle

选项 1： 

$('#PackageID').val('2');

选项 2 - 通过索引：

$('#PackageID :nth-child(1)').prop('selected', true);

选项 3 - 通过值：

$('#PackageID option:eq(2)').prop('selected', true);

所有这些都将更新 DOM，从而正确呈现。

相关文章：