Question

我正在使用一些代码 http://abeautifulsite.net/blog/2008/04/jquery-multiselect/#demo

看起来不错，但我需要清除dropdwn并添加新选项。当我这样做时，宽度变得宽松并且扩展。

如何添加选项宽度以更改多点向下的布局？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script src="http://labs.abeautifulsite.net/projects/js/jquery/multiSelect/jquery.bgiframe.min.js" type="text/javascript"></script>
<script src="http://labs.abeautifulsite.net/projects/js/jquery/multiSelect/jquery.multiSelect.js" type="text/javascript"></script>
<link href="http://labs.abeautifulsite.net/projects/js/jquery/multiSelect/jquery.multiSelect.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">

        $(document).ready( function() {
        // Options displayed in comma-separated list
            $("#d").multiSelect({ oneOrMoreSelected: '*' });            
            $("#f").multiSelect({ oneOrMoreSelected: '*' });            
        });
        var i=0;

        function insOptions() {
            var ddl = $("#d");   

            ddl.append("<option value='" + i+ "'>" + i+i+i+i+i+i+i+i+i+i+i+i+i+i+i+i+i+i + "</option>");
            i++;
            ddl.append("<option value='" + i+ "'>" + i + "</option>");
            i++;
            ddl.append("<option value='" + i+ "'>" + i + "</option>");
            ++i;
            //document.getElementById("control_9").options.add(opt);
            var widthh = $("#d").width();

            $("#d").multiSelect({ oneOrMoreSelected: '*' });      

            var ddl = $("#f");   

            ddl.append("<option value='" + i+ "'>" + i+i+i+i+i+i+i+i+i+i+i+i+i+i+i+i+i+i + "</option>");
            i++;
            ddl.append("<option value='" + i+ "'>" + i + "</option>");
            i++;
            ddl.append("<option value='" + i+ "'>" + i + "</option>");
            ++i;
            //document.getElementById("control_9").options.add(opt);
            var widthh = $("#f").width();

            $("#f").multiSelect({ oneOrMoreSelected: '*' });       
        }   
    </script>
</head>
<body>
    <form action="" name="myForm" method="post">
        <p>
            <select id="d" multiple="multiple" style="width: 120px">
                <option value=""></option>
                <option value="option_1">Option 1</option>
                <option value="option_2">Option 2</option>
            </select>
        </p>
                <p>
            <select id="f" multiple="multiple" style="width: 220px">
                <option value=""></option>
                <option value="option_1">Option 1</option>
                <option value="option_2">Option 2</option>
            </select>
        </p>
        <p>
            <input type="button" value="Add new options in dropdown" onclick="insOptions();">
        </p>
    </form>
</body>
</html>

Answer 1

尝试使用此

<fieldset data-role="controlgroup" style="width:200px">


    <select name="hobbies" style="padding:0px;" multiple="multiple" id="ddhobbies" data-native-menu="false">
        <option>Hobbies</option>
        <option value="Reading">Reading</option>
        <option value="Music">Music</option>
        <option value="Movies">Movies</option>
        <option value="Sports">Sports</option>
        <option value="Cooking">Cooking</option>
        <option value="Dancing">Dancing</option>
        <option value="Social Service">Social Service</option>
        <option value="Drawing/Painting">Drawing/Painting</option>
        <option value="Other">Other</option>

    </select></fieldset>

我希望它有所帮助。

multiSelect - 下拉列表。添加新选项时宽度更改

1 个答案: