html-----select 复选框

最新推荐文章于 2022-10-09 11:29:29 发布

原创最新推荐文章于 2022-10-09 11:29:29 发布 · 3.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#function #input #button #html

JavaScript 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的选择器与输入框值同步的方法。通过定义`select2str`函数来获取选中项的值，并将其设置为指定文本框的内容；同时，通过`bindselect`函数可以预先设置选择器的选中项。此方法适用于需要将用户的选择转换为字符串进行后续处理的场景。

                     select2str=function(id)
                     {
               var obj=document.getElementById(id);

var destobj=document.getElementById(id.replace("sel_",""));

                        if( isinarray(obj.options[i].value,strs))
                            {
                             obj.options[i].selected=true;
                            }
                        }
                     }
                     isinarray=function(value,arr)
                     {
                         for(var i=0; i<arr.length; i++)
                         {
                            if(value==arr[i])
                            {
                                return true;
                                }
                         }
                         return false;
                     }

            </script>
       </head>
       <body>
         <select id="sel_cate" size="3" multiple >
            <option value="1">x1</option>
            <option value="2">x2</option>
              <option value="3">x3</option>
                <option value="4">x4</option>
            </select>
            <script>
                     bindselect('sel_cate','1,4');
            </script>
            <input type="text" id="cate" name="cate" />
            <input type="button" id="btnSure" name="btnSure" onclick="select2str('sel_cate')" />
       </body>
</html>