标签: jquery-chosen

你怎么能有一个动态宽度风格的harvesthq Chosen下拉菜单？

默认情况下,它具有固定的宽度,如果您尝试使用CSS修改它,您将遇到几个问题以达到良好的结果.

我正在使用选择多个选择我想要做的是,如果用户选择任何我希望该值的选项,然后我将根据该值执行一些功能.

在没有多重选择的情况下,我可以通过使用foll获得所选值.码

$(".selectId").chosen().change(function(){
     selectedValue = $(this).find("option:selected").val();
});

但是在多个选择中我再次获得第一个选定的值n再次可以通过在多个select元素中找到当前选择的值来帮助我吗？

我使用selected.jquery.js作为选择字段

<select chosen multiple data-placeholder="Select Body Part(s)"  
ng-options="option.Name as option.Name for option in BodyPartList" ng-model="Body_Part">
      <option value="" disabled>Select Body Part(s)</option> 
</select>

但是,如果模型中没有数据,它仅显示数据占位符值.我想在列表中显示"Select Body Part(s)"作为选项.并且用户不能选择此项.原因是,我想在Body_Parts列表中添加动态"未知"值.但它没有反映在列表中.

选择具有单一选择的相同工作.

我使用validate.jquery.js:工作正常.但是当我添加selected.js时,对选择下拉列表的验证不再有效.

这是JS我正在使用http://pastebin.com/S9AaxdEN

这是我的选择形式:

<select name="category" id="category" placeholder="" class="{validate:{required:true}}">
<option value=""><?php echo lang('category_choice'); ?></option>
<option value="vtt">VTT</option>
<option value="autre">Autre type de v&eacute;lo</option>
</select>

不知道为什么choose.js禁用验证,任何想法？

我正在使用所选的插件.

将其添加到我的文档不会使我输入文本字段并将新项添加到列表中.

$(document).ready(function (){    
    $(".chosen-select").trigger("chosen:updated");
});

这将允许将一些硬编码文本添加到列表中:

$(document).ready(function (){
    $('.chosen-select').chosen();
    $('.addsomething').click(function (){
        $(".chosen-select").prepend("<option>Utopia</option>");
        $(".chosen-select").trigger("chosen:updated");
    });
});

我希望看到的是我希望能够在文本字段中添加文本,点击返回并在我没有选择的情况下添加我的条目.它不需要永久添加到选项列表中.

我在div中有一个选择框,默认情况下没有显示,在某些点击事件中,div的显示属性更改为阻止但是选择下拉列表没有显示并显示空白区域.我已经在同一个触发函数中为选择框调用了selected()方法,我在这里改变了div的可见性.

这是我的问题的代码.

<div class="controls" style="display:none" id="Department-11">
    <select multiple="" class="chosen-select1" id="form-field-select-4" data-placeholder="Choose a Department...">
        <option value="Management">Senior Management</option>
        <option value="Legal">Legal</option>
        <option value="Operations">Operations</option>
        <option value="Administration">Administration</option>
        <option value="R&D">R&D</option>
        <option value="Sales & Marketing">Sales & Marketing</option>
        <option value="Finance">Finance</option>
        <option value="Technology">Technology</option>
        <option value="Customer Service">Customer Service</option>
        <option value="Pro Services">Pro Services</option>
        <option value="HR">HR</option>
        <option value=""></option>
    </select>
</div>

<a href="javascript:void(0);" onclick="showselect();">
    Show select
</a>

JS代码是

function showselect() {
    $('#Department-11').show();
    $(".chosen-select1").chosen();
}

目前我正在使用JQuery对话框中的Chosen JQuery小部件,并且只要打开下拉框,下拉列表的大小就会导致对话框溢出,导致:(注意有两个滚动条,一个用于下拉框,一个用于对话框,这使得滚动几乎无用:

有没有办法设置:

• 必须滚动之前显示的最大项目数,
• 选择/选择下拉框的最大高度,或
• 其中一个包含元素的最大高度

这样看起来会更像这样(这是一个Photoshop,这就是我想要的样子):

即在对话框窗口中没有溢出,因为在您必须滚动之前只显示了8个项目.

我正在使用基于twitter bootstrap示例的模态.我有一个选择使用的元素.当所选择的选择下降时,它会被模态页脚切断.我试图在所选元素上添加z-index值,但没有任何作用.我正在倾斜看它,并想知道它是否只是因为select元素是在模态页脚div之前的div？我正在使用所选的默认CSS和bootstrap,所以我没有修改任何东西.

例.

HTML:

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    ×</button>
                <h3>
                    Add Tag</h3>
            </div>
            <div class="modal-body">
                <div class="control-group">
                    <label for="addedTags">
                        Add tags (separated by commas)
                    </label>
                    <input id="addedTags" style="width: inherit" type="text">
                </div>
                <div class="control-group">
                    <label for="deleteTags">
                        Delete tags
                    </label>
                    <select style="display: none;" class="tags chzn-done" id="deleteTags" multiple="multiple" name="deleteTags"><option value="49">Accessories</option>
    <option value="69">AG_Adriano_Goldschmied</option>
    <option value="37">BCBG</option>
    <option value="38">Bebe</option>
    <option value="45">Bernie_Dexter</option>
    <option value="19">Black</option>
    <option value="6">Blue</option>
    <option value="66">Body-Con</option>
    <option value="71">Casual</option>
    <option value="39">Christian_Louboutin</option>
    <option value="64">Clear</option>
    <option value="50">Coach</option>
    </select><div style="width: [object Object]px;" class="chzn-container chzn-container-multi chzn-container-active" id="deleteTags_chzn"> …

我想添加一个表单字段,可以自动填充文本并可以使用多个选项卡(类似于fb).我发现select2.js可以帮助我做到这一点,但是当我将多个属性设置为true时,我在使用它时遇到了问题.如果我添加多个:true,页面将其显示为正常选择.

我发现select2页面上的文档令人困惑.

我是所有人的新手,请帮助我.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>          
<script type="text/javascript" src="select2.js"></script>          

 <link href="select2.css" rel="stylesheet"/>
    <script src="select2.js"></script>
    <script>
        $(document).ready(function() { 
        $("#e1").select2([multiple: true]);
        });
    </script>

</head>
<body>
<input type="button" id="123">click
</br>
<input type="hidden" id="1234">
<select id="e1">
        <option value="AL">Alabama</option>
        <option value="Am">Amalapuram</option>
        <option value="An">Anakapalli</option>
        <option value="Ak">Akkayapalem</option>

        <option value="WY">Wyoming</option>
    </select>

</body>
</html>

我有一个asp.net列表框,我正在使用jquery选择的插件.数据占位符值似乎并不总是与列表框一起使用.例如,看图像:

请注意它的列表框显示Region"选择重新"然后它停止...它非常随机地查看工作正常的城市列表框.但是看看它应该说的国家的列表框,Select Country...但它显示Select Country..(缺少最后一个时期).我的listbox控件的asp.net标记是这样的:

<asp:ListBox ID="lbRegion" AutoPostBack="true" runat="server" class="chosen-select"
             data-placeholder="Select Region..." SelectionMode="Multiple"
             OnSelectedIndexChanged="lbRegion_OnSelectedIndexChanged" ToolTip="Select Region...">
</asp:ListBox>

我试过重新创建它等等......但无济于事.是什么赋予了？

这是我的jquery包括所选的类:

$(".chosen-select").chosen({
            search_contains: true,
            no_results_text: "Oops, nothing found!",
            allow_single_deselect: true
        });
        $('.chosen-container').css('width', '200px');