薰 风 2023-09-02 19:32 采纳率: 63.3%
浏览 11

前端动态给select 设置selected属性

jsp页面如何给下拉框中的动态增加selected从而默认选中

图1是jsp页面

img


图2是select 和 option标签

img


图3是表格的页面

img


图4是

img


图4 是输出下拉框信息的页面

如何让图4中输出下拉框的和表格中的值一样,如何动态添加selected属性,就比如我点姓名是吴昊的表格,弹出来了时请选中班级变成2012,和表格中的班级一样!!

 // 弹出之后回调
                    success: function (layerNow, index) {
                        // 给输入框 赋值
                        console.log(data)
                        $("#sid").val(data.id);
                        $("#name1").val(data.name);
                        $("#birthday1").val(data.s_birthday);
                        $("#qq1").val(data.qq);
                        $('#phone1').val(data.phone);
                        $('#clazz1').val(data.clazz);
                       // prop("selected") [attribute=value] 给下拉框设置selected 属性

                        //  city1, mark1
                        console.log($("#sid").val());
                        console.log($("#name1").val());
                        console.log($("#clazz1").val());

                    },
  • 写回答

1条回答 默认 最新

  • CSDN-Ada助手 CSDN-AI 官方账号 2023-09-02 22:28
    关注

    【以下回答由 GPT 生成】

    我可以通过使用Vue.js来解决你的问题。首先，你需要在JSP页面中引入Vue.js的CDN链接。然后，在Vue实例中定义一个数据属性来存储下拉框的选项和默认选中的值。

    <head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <select v-model="selectedOption">
      <option v-for="option in options" :value="option.value" :selected="option.value === defaultValue">{{ option.label }}</option>
    </select>
  </div>
</body>

<script>
  new Vue({
    el: '#app',
    data: {
      options: [
        { label: '选项1', value: 'option1' },
        { label: '选项2', value: 'option2' },
        { label: '选项3', value: 'option3' }
      ],
      defaultValue: 'option2',  // 默认选中的值
      selectedOption: ''  // 用于存储选择的值
    }
  })
</script>

    在上面的代码中，我们使用了Vue.js的v-model指令来动态绑定selectedOption属性和下拉框的值。然后，我们使用v-for指令遍历options数组，为每个选项创建一个<option>元素，并通过:selected属性来判断是否为默认选中的值。

    这样，你就可以根据表格中的值来设置defaultValue，从而实现动态设置下拉框的默认选中值的目的。

    希望以上解决方案对你有帮助。如果你还有任何疑问，请随时提问。



    【相关推荐】



    如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^
    评论

报告相同问题？

问题事件

  • 创建了问题 9月2日

悬赏问题

  • ¥15 游戏盾如何溯源服务器真实ip?需要30个字。后面的字是凑数的
  • ¥15 vue3前端取消收藏的不会引用collectId
  • ¥15 有关类的报错，在模块里调用另一个模块的方法下的变量时出错
  • ¥15 delphi7 HMAC_SHA256方式加密
  • ¥15 关于#qt#的问题：我想实现qcustomplot完成坐标轴
  • ¥15 下列c语言代码为何输出了多余的空格
  • ¥15 kali linux用wget archive.kali.org/archive-key.asc指令下载签名无效（失败）
  • ¥15 openHarmony 利用c++程序在dayu210开发板上实现拉取RTSP视频流并且在屏幕上显示
  • ¥15 GD32H757的can通信配置
  • ¥20 nist随机数测试的问题