Question

我有以下代码段：

<p>
   <label>Dual Select</label>
    <span id="dualselect" class="dualselect">
        <select name="select3" multiple="multiple" size="10">
            <option value="">Selection One</option>
            <option value="">Selection Two</option>
            <option value="">Selection Three</option>
            <option value="">Selection Four</option>
            <option value="">Selection Five</option>
            <option value="">Selection Six</option>
            <option value="">Selection Seven</option>
            <option value="">Selection Eight</option>
        </select>
        <span class="ds_arrow">
            <span class="arrow ds_prev">&laquo;</span>
            <span class="arrow ds_next">&raquo;</span>
        </span>
        <select name="select4" multiple="multiple" size="10">
            <option value=""></option>
        </select>
    </span>
</p>

它在浏览器中呈现如下： view html code produces

（我使用asp.net mvc4来显示此代码。）

我如何能够指定最初选择哪个选项？

例如，我想要左侧的所有可能选项，并且我想要在右侧注册的所有选项。

编辑：我尝试在HTML中指定它（即通过在第二个<select>中放置我注册的所有选项），但我仍然得到相同的渲染时我加载了页面。

主页附带的页面顶部包含一些jQuery文件。我认为以下jQuery处理此控件：

jQuery(document).ready(function(){

//dual box
var db = jQuery('#dualselect').find('.ds_arrow .arrow');    //get arrows of dual select
var sel1 = jQuery('#dualselect select:first-child');        //get first select element
var sel2 = jQuery('#dualselect select:last-child');         //get second select element

sel2.empty(); //empty it first from dom.

db.click(function(){
    var t = (jQuery(this).hasClass('ds_prev'))? 0 : 1;  // 0 if arrow prev otherwise arrow next
    if(t) {
        sel1.find('option').each(function(){
            if(jQuery(this).is(':selected')) {
                jQuery(this).attr('selected',false);
                var op = sel2.find('option:first-child');
                sel2.append(jQuery(this));
            }
        }); 
    } else {
        sel2.find('option').each(function(){
            if(jQuery(this).is(':selected')) {
                jQuery(this).attr('selected',false);
                sel1.append(jQuery(this));
            }
        });     
    }
});
}

Answer 1

您想要的左侧选项应该放在第一个<select>元素（name="select3"）中。

您想要的右侧选项应该放在第二个<select>元素（name="select4"）中。

基本上，现在的确如此。

编辑：啊 - 由于某种原因，jQuery文件中的以下行正在清空文档中的第二个<select>元素。

sel2.empty();

作为参考，<label>元素使用不正确。每个<label>都有一个表单元素（在id的{{1}}属性中由<label>引用），但它有点无用（请参阅{{ 3}}）。

要标记多个表单元素（例如您的两个for），请将它们包装在<select>元素中，并使用字段集中的<fieldset>元素。

如何控制在我的两个<select>元素中显示哪些选项？</select>

1 个答案: