如何获取 chosen chosen.jquery.js 选中的值

凌昕

2023-12-01

转自https://blog.csdn.net/u013888044/article/details/53097599

转自https://www.cnblogs.com/songxingzheng/p/4057343.html

1、初始化

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="../css/chosen.css" rel="stylesheet" /> <!--引入chosen.css-->
    <script src="../js/jquery-1.10.2.js"></script> <!--引入jquery-*.js-->
    <script src="../js/chosen.jquery.js"></script> <!--引入chosen.jquery.js-->
</head>
<body>
    <select data-placeholder="Choose a Country..." class="chzn-select" multiple style="width:350px;" id="dl_chose2">
        <option value=""></option>
        <option value="1" >a</option>
        <option value="2">b</option>
        <option value="3">c</option>
        <option value="4">d</option>
        <option value="5">e</option>
        <option value="6">f</option>
        <option value="7">g</option>
        <option value="8">h</option>
        <option value="9">i</option>
    </select>
    <!--<a onclick="chose_mult_set_ini('#dl_chose2','1,3,5,8');" href="javascript:;;">Set a,c,e,h to Chose Mult-Select</a>-->
 
 
    
    <script language="javascript">
        // 多选 select 数据初始化
        function chose_mult_set_ini(select, values) {
            var arr = values.split(',');
            var length = arr.length;
            var value = '';
            for (i = 0; i < length; i++) {
                value = arr[i];
                $(select + " option[value='" + value + "']").attr('selected', 'selected');
            }
            $(select).trigger("liszt:updated");
        }
 
        $(document).ready(function () {
            // 如果要初始化已选中的项，需要在调用chosen()函数之前调用chose_mult_set_ini()函数
            // 设置<select>的<option>属性selected='selected'，这样chosen()函数被调用时，相应项会显示在框中
            chose_mult_set_ini('#dl_chose2', '1,3,5,8');
 
            //初始化
            $(".chzn-select").chosen();
        });
    </script>
</body>
</html>

二、取值

作为一款高级表单插件，chosen.jquery.js应该获得了不少的使用者，但在使用上可能会碰到不少问题，一个很重要的问题就在chosen select的取值上。

我们从页面引用chosen说起，

1）.引用chosen.jquery.js

css：chosen.css，bootstrap.min.css?v=3.3.6，font-awesome.css?v=4.4.0

js：jquery.min.js?v=2.1.4，bootstrap.min.js?v=3.3.6，chosen.jquery.js

2）.chosen 的html标签

                        <div class="form-group">
                            <label class="font-noraml">多选</label>
                            <div class="input-group">
                                <select id="cse" data-placeholder="选择省份" class="chosen-select" multiple style="width:350px;" tabindex="1" onchange="">
                                    <option value="">请选择省份</option>
                                    <option value="310000" hassubinfo="true">上海</option>
                                    <option value="320000" hassubinfo="true">江苏省</option>
                                    <option value="330000" hassubinfo="true">浙江省</option>
                                    <option value="340000" hassubinfo="true">安徽省</option>
                                    <option value="350000" hassubinfo="true">福建省</option>
                                    <option value="990000" hassubinfo="true">海外</option>
                                </select>
                            </div>
                        </div>

3）.初始化chosen

<pre name="code" class="javascript">var config = {
    '.chosen-select': {},
    '.chosen-select-deselect': {
        allow_single_deselect: true
    },
    '.chosen-select-no-single': {
        disable_search_threshold: 10
    },
    '.chosen-select-no-results': {
        no_results_text: '找不到数据!'
    },
    '.chosen-select-width': {
        width: "95%"
    }
}
for (var selector in config) {
   $(selector).chosen(config[selector]);
}

4）.取值

    <script language="javascript">
        $(document).ready(function(){
            //chosen初始化
            //$(".chosen-select").chosen();
            //多选select 数据同步
            chose_get_ini('#cse');
            //change 事件
            $('#cse').change(function(){
                alert(chose_get_value('#cse'));
                //console.log(chose_get_value('#cse'));
                alert(chose_get_value('#cse') + ' : '+ chose_get_text('#cse'));
            });
        });
        //select 数据同步
        function chose_get_ini(select){
            $(select).chosen().change(function(){$(select).trigger("liszt:updated");});
        }
        //select value获取
        function chose_get_value(select){
            return $(select).val();
        }
        //select text获取，多选时请注意
        function chose_get_text(select){
            return $(select+" option:selected").text();
        }
    </script>

5）.另
在对chosen的下拉框做数据初始化或者通过js给下拉框插入option之后都需要更新chosen：

$(select).trigger("liszt:updated");

如何获取 chosen chosen.jquery.js 选中的值

相关阅读

相关文章

相关问答

相关文档