美文网首页
问题记录;使用input的value属性保存select下的选项

问题记录;使用input的value属性保存select下的选项

作者: isaaCyu | 来源:发表于2017-08-19 15:51 被阅读111次

问题的发现

在写猫言猫语项目后台管理界面 添加文章功能的时候

想到用 select 来显示 文章分类选项

<select>
         <option value="000000">请选择文章类型</option>
         <option value=" 1 "> 1 </option>
         <option value=" 2 "> 2 </option>
         <option value=" 3 "> 3 </option>
</select>

想要通过 input 的 value 属性 暂存 option的 value属性的值

然后通过 form表单提交给某页面进行处理

通过 foreach 循环显示了option
我将input 加在了 foreach循环中
发现select只剩下 第一个option可选
其它选项 都会打印在网页上

问题的解决

先想到的是 点击事件 获取 select.val()的值 但是 option并没有触发点击事件的属性
偶然发现 HTML的 onchange方法
于是查看 w3c ->html-> onchange方法

当值改变时检查输入字段:
<input type="text" name="txt" value="Hello" onchange="checkField(this.value)">

值改变 触发 checkField。
完美获取select 下选项option的值
通过 jquery的 .attr()方法 改变 input 的value属性的值

代码如下:

select 部分:

            <select  data-am-selected="{btnSize: 'sm'}" onchange="checkField(this.value)">
                <option value="000000">请选择文章类型</option>

                <?php
                foreach ($data as $key) {
                    ?>
                    <option value="<?php echo $key->catalog_id?>"><?php echo $key->catalog_name?></option>
                    <?php
                }
                ?>
            </select>

用来存值得 input

              <input  id="saveInput"  value=" ">

checkField函数

   function checkField(val) {
        $("#saveInput").attr("value",val);
   }

相关文章

网友评论

      本文标题:问题记录;使用input的value属性保存select下的选项

      本文链接:https://www.haomeiwen.com/subject/tpmtdxtx.html