记一次jquery: select下拉框默认设置选中项(利用数据回显)

3 篇文章 0 订阅

1. 用selected属性默认增加选中项:

<select name="" id="">
  <option value="1">主航线</option>
  <option value="2" selected>备航线</option>
</select> -->

2. 根据后台返回值进行回显,设置选中项

(假设后台返回被选中的下拉框数据为optionType为2)

❤ 法一

参考:关于select下拉框的数据回显_月来better的博客-CSDN博客_select下拉框的数据回显

<select name="" id="" class="selectedList">
      <option value="1">主航线</option>
      <option value="2">备航线</option>
      <option value="3">主航线1</option>
      <option value="4">备航线2</option>
</select>
<script type="text/javascript">
    let optionType = 4;
    let allSelect = $(".selectedList > option");
    // allSelect.each((index, item) => {
    //   if ($(item).val() == optionType) {
    //     $(item).prop("selected", true);
    //   }
    // });

    // 或:

    // 获取所有的option的value值,然后与后台返回的值(要回显的值)进行对比
    // 若值相同则将selected属性指向这个值
    for (let i = 0; i < allSelect.length; i++) {
      let item = allSelect[i].value;
      if (optionType == item) {
        $(".selectedList option[value='" + item + "']").attr(
          "selected",
          "selected"
        );
      }
    }

❤ 法二

参考: select动态设置默认选中:数据回显 - 简书

<select name="" id="" class="selectedList">
</select>
<script type="text/javascript">
    let optionType = 2;
    $(".selectedList").append(`
      <option ${
        optionType == 1 ? "selected='selected'" : ""
      } value="1">主航线</option>
      <option ${
        optionType == 2 ? "selected='selected'" : ""
      } value="2">备航线</option>
      <option ${
        optionType == 3 ? "selected='selected'" : ""
      } value="3">主航线1</option>
      <option ${
        optionType == 4 ? "selected='selected'" : ""
      } value="4">备航线2</option>
    `);
</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值