登录

javascript - 一段 Jquery 代码,求大神优化补充。

基本作用

页面中的 radio、checkbox、select,从数据库获取数据库后给这个方法传值,让相应的值自动 selected,最常用的就时select下拉框了;

需求

  1. 大神帮忙优化如下代码(如有优化空间);

  2. (可选)还有我的部分页面还有一些 <li> 组成的导航,如果也能通过传值让<li> addclass('active')的话最好了,一个方法搞定。

/* ----------------
 * - 表单组件值自动选择
 * ----------------
 */
function setValue(name, value){
    var first = name.substr(0,1), input, i = 0, val;
    if(value === "") return;
    if("#" === first || "." === first){
        input = $(name);
    } else {
        input = $("[name='" + name + "']");
    }

    if(input.eq(0).is(":radio")) { //单选按钮
        input.filter("[value='" + value + "']").each(function(){this.checked = true});
    } else if(input.eq(0).is(":checkbox")) { //复选框
        if(!$.isArray(value)){
            val = new Array();
            val[0] = value;
        } else {
            val = value;
        }
        for(i = 0, len = val.length; i < len; i++){
            input.filter("[value='" + val[i] + "']").each(function(){this.checked = true});
        }
    } else {  //其他表单选项直接设置值
        input.val(value);
    }
}
# JavaScript
PHP中文网PHP中文网2172 天前438 次浏览

全部回复(2) 我要回复

  • PHP中文网

    PHP中文网2017-04-11 09:11:10

    /* ----------------
     * - 表单组件值自动选择
     * ----------------
     */
    function setValue(name, value) {
        // name.substr(0, 1) 可以用 name[0] 或者 name.charAt(0) 代替
        // 如果 name 为空字符串的时候 name[0] 是 undefined,name.charAt(0) 是 ""
        var first = name.substr(0, 1), input, i = 0, val;
    
        // [james] 如果有些值本来就存在空字符串,你这个作法就不太妥
        if (value === "") return;
    
    
        if ("#" === first || "." === first) {
            input = $(name);
        } else {
            input = $("[name='" + name + "']");
        }
    
        // input.eq(0) 可以用 input.first() 代替
        // 而且下面用了这么多次,可以用 var firstInput = input.first() 暂存一个变量
        if (input.eq(0).is(":radio")) { //单选按钮
            input.filter("[value='" + value + "']").each(function() { this.checked = true; });
        } else if (input.eq(0).is(":checkbox")) { //复选框
            // 这个 if 可以用一个三元运行解决 var = $.isArray(value) ? value : [ value ]
            if (!$.isArray(value)) {
                val = new Array();
                val[0] = value;
            } else {
                val = value;
            }
    
            for (i = 0, len = val.length; i < len; i++) {
                input.filter("[value='" + val[i] + "']").each(function() { this.checked = true; });
            }
        } else {  //其他表单选项直接设置值
            // select 也可以用这种方法设置值的,所以不用 care 这个问题
            input.val(value);
        }
    }

    this.checked = true 本身没有问题,但是用 $(this).prop("checked", true) 可能会好一些(到底好不好我也不确定)

    另外,你只有设置 true 的情况,那么那些当前选中,给的值又没选中的怎么处理呢?

    下面是综合你的代码进行的修改

    https://jsfiddle.net/yoeray0d/2/

    function setInputSelected(name, value) {
        var input = $("[name='" + name + "']");
        var inputFirst = input.first();
        if (inputFirst.is(":radio")) {
            input.filter("[value=" + value + "]").prop("checked", true);
        } else if (inputFirst.is(":checkbox")) {
            input.prop("checked", false);
            $(value).each(function() {
                input.filter("[value=" + this + "]").prop("checked", true);
            });
        } else {
            input.val(value);
        }
    }

    回复
    0
  • PHP中文网

    PHP中文网2017-04-11 09:11:10

    radio、checkbox、select的根据值的选中应该不需要你那么复杂,简单写了下,仅供参考

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>radio/checkbox/select</title>
        <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    </head>
    <body>
        <p class="radio">
            <input type="radio" name="sex" value="1">男
            <input type="radio" name="sex" value="2">女
            <input type="radio" name="sex" value="3">其他
        </p>
        <p class="checkbox">
            <input type="checkbox" name="language" value="1">php
            <input type="checkbox" name="language" value="2">java
            <input type="checkbox" name="language" value="3">python
            <input type="checkbox" name="language" value="4">ruby
        </p>
        <p class="select">
            <select name="education" id="education">
                <option value="1">初中</option>
                <option value="2">高中</option>
                <option value="3">大专</option>
                <option value="4">本科</option>
            </select>
        </p>
        <script>
            //radio根据值选中
            $("input[name=sex][value=2]").attr("checked", 'checked');
            //checkbox根据值选中
            $("input[name=language][value=3]").attr("checked", 'checked');
            //select根据值选中
            $("select[name=education] option[value=3]").attr("selected",true);
        </script>
    </body>
    </html>

    回复
    0
  • 取消回复发送