• 博客园logo
  • 会员
  • 周边
  • 新闻
  • 博问
  • 闪存
  • 众包
  • 赞助商
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
黄洪波写点东西的地方
博客园    首页    新随笔    联系   管理    订阅  订阅
为html select添加自定义属性

https://stackoverflow.com/questions/46600612/html-select-onchange-get-custom-attribute-value-set-to-other-input-value

$(function() {
  $('select.form-control').change(function() {
    var typeId = $(this).find('option:selected').data('typeid');
    $("#money").val(typeId);
  }).change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control">
  <option data-typeid="1111" value="courseId1">courseName1</option>
  <option data-typeid="2222" value="courseId2">courseName2</option>
</select>

<input type="number" value="" id="money" class="form-control">

 

示例:

<select style="position:relative; z-index: 100; pointer-events: all;" name="addEntity" id="addEntity">
                  <option data-typeid="1111" data-resourcename="小轿车01" value ="car">汽车</option>              
                  <option data-typeid="2222" data-resourcename="大叶伞01" value ="tree">树</option>
                  <option data-typeid="3333" data-resourcename="枪式摄像头01" value ="camera">摄像头</option>
                  <option data-typeid="4444" data-resourcename="草坪灯01" value ="">传感器</option>
                </select>



$('#addEntity').change(function(){
        //输出选中项的值
        console.log($(this).val());
        dynamicAddType = $(this).val();

        var typeId = $(this).find('option:selected').data('typeid');
        console.log("custom typeid ",typeId)

        var resourcename = $(this).find('option:selected').data('resourcename');
        console.log("custom resourcename ",resourcename)
        
      });

 

posted on 2021-11-10 10:13  黄洪波  阅读(331)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2026
浙公网安备 33010602011771号 浙ICP备2021040463号-3