在javascript中選擇的動作

1）我有DropDown1與一些汽車的名稱。

2）我有DropDown2有兩個值：

在DropDown2，下面應該選擇發生的每個值：

一）在選擇UserInput，左側多選箱應該得到隱藏， 在同一個地方，應該出現一個文本框。用戶可以在文本框中輸入任何汽車名稱，然後使用左至右按鈕將該值移至右側選擇框。在這種情況下，應該禁用從右到左的按鈕。

b）在選擇AutoPopulate時，多選框應該出現在與文本框相同的位置左側，並且文本框應該隱藏。多選框應該使用DropDown1填充汽車列表。用戶應該能夠從左到右和從右到左選擇和移動汽車。

我是JavaScript新手。有人可以幫助我這個。

$(function(){ 
 
    $("#button1").click(function(){ 
 
     $("#list1 > option:selected").each(function(){ 
 
      $(this).remove().appendTo("#list2"); 
 
     }); 
 
    }); 
 
    
 
    $("#button2").click(function(){ 
 
     $("#list2 > option:selected").each(function(){ 
 
      $(this).remove().appendTo("#list1"); 
 
     }); 
 
    }); 
 
});

.bloc { display:inline-block; vertical-align:top; overflow:hidden; border:solid grey 1px; width:100px;} 
 
.bloc select { padding:10px; margin:-5px -20px -5px -5px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
DropDown1: 
 
<select id="DropDown1" name="DropDown1"> 
 
    <option value="volvo">Volvo</option> 
 
    <option value="saab">Saab</option> 
 
    <option value="mercedes">Mercedes</option> 
 
    <option value="audi">Audi</option> 
 
</select> 
 
<br><br> 
 
DropDown2: 
 
<select id="DropDown2" name="DropDown2"> 
 
    <option value="">-- Select --</option> 
 
    <option value="oneUsrInput">User Input</option> 
 
    <option value="twoAutoPopulate">Auto Populate</option> 
 
</select> 
 
<br><br> 
 
<input type="text" id="TextBoxId" name="TextBoxId"> 
 
<div class="bloc">  
 
    <select id="list1" multiple="multiple" rows=2> 
 
     <option value=1>Option 1</option> 
 
     <option value=2>Option 2</option> 
 
     <option value=3>Option 3</option> 
 
     <option value=4>Option 4</option> 
 
     <option value=5>Option 5</option> 
 
     <option value=6>Option 6</option> 
 
    </select> 
 
    </div> 
 
<div style="display:inline-block;"> 
 
    <input id="button1" type="button" value=">>" /> 
 
    <br/> 
 
    <input id="button2" type="button" value="<<" /> 
 
</div> 
 
<div class="bloc"> 
 
    <select id="list2" multiple="multiple" rows=2>   
 
    </select> 
 
</div>

來源

2016-05-15 Nik

請發表您的代碼。 – Utkanos

你的小提琴創建錯誤。您需要單擊[JAVASCRIPT]按鈕並使用「In Head」，而不是添加外部腳本並使用onload。這是[固定小提琴]（https://jsfiddle.net/57tu5uz2/）。我還將您的代碼添加到了您的問題中的代碼片段 – mplungjan

@mplungjan：謝謝！ – Nik

這裏是一個工作這樣做的片段。它還驗證，你不能兩次添加相同的文字列表：

$(function(){ 
 
    $("#button1").click(function(){ 
 
     if ($('#DropDown2').val() === 'oneUsrInput') { 
 
      var txt = $('#TextBoxId').val(); 
 
      $('#TextBoxId').val(''); 
 
      // add text only when not already existing in list: 
 
      if (!$('#list2').val(txt).val()) { 
 
       $('<option/>').text(txt).val(txt).appendTo('#list2'); 
 
      } 
 
     } else { 
 
      $("#list1 > option:selected").each(function(){ 
 
       $(this).remove().appendTo("#list2"); 
 
      }); 
 
     } 
 
    }); 
 
    
 
    $("#button2").click(function(){ 
 
     $("#list2 > option:selected").each(function(){ 
 
      $(this).remove().appendTo("#list1"); 
 
     }); 
 
    }); 
 
    
 
    $("#DropDown2").change(function() { 
 
     var isUserInput = $(this).val() === 'oneUsrInput'; 
 
     $('#TextBoxId').toggle(isUserInput); 
 
     $('#list1,#button2').toggle(!isUserInput); 
 
    }); 
 
    
 
    // at start up, populate multi-select list  
 
    $("#list1").html($("#DropDown1").html()); 
 
    // at start up, set visibility right: 
 
    $("#DropDown2").change(); 
 
});

.bloc { display:inline-block; vertical-align:top; overflow:hidden; 
 
     border:solid grey 1px; width:100px;} 
 
.bloc select { padding:10px; margin:-5px -20px -5px -5px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
</script> 
 
DropDown1: 
 
<select id="DropDown1" name="DropDown1"> 
 
    <option value="volvo">Volvo</option> 
 
    <option value="saab">Saab</option> 
 
    <option value="mercedes">Mercedes</option> 
 
    <option value="audi">Audi</option> 
 
</select> 
 
<br><br>DropDown2: 
 
<select id="DropDown2" name="DropDown2"> 
 
    <option value="">-- Select --</option> 
 
    <option value="oneUsrInput">User Input</option> 
 
    <option value="twoAutoPopulate">Auto Populate</option> 
 
</select> 
 
<br><br> 
 
<div class="bloc">  
 
    <input type="text" id="TextBoxId" style="display:none" name="TextBoxId"> 
 
    <select id="list1" multiple="multiple" rows=2> 
 
    </select> 
 
</div> 
 
<div style="display:inline-block;"> 
 
    <input id="button1" type="button" value=">>" /> 
 
    <br/> 
 
    <input id="button2" type="button" value="<<" /> 
 
</div> 
 
<div class="bloc"> 
 
    <select id="list2" multiple="multiple" rows=2></select> 
 
</div>

來源

2016-05-15 11:58:38 trincot

謝謝..有關如何使用DropDown1的值填充多選的指針？ – Nik

這是否意味着您將在dropdown1和多選中具有相同的值？如果是這樣，並且如果多重選擇被重新填充，您是否希望清除右側？或者，如果沒有，在右列表（以前選擇）和左列表中具有相同的值是不是問題？ – trincot

無論如何，我已經更新了片段：它現在將多個選擇列表中的車名加載。由於它保持在原位，所以即使隱藏起來，也不會再重新填充。我不認爲這是必要的。你可否確認？另外在第一個下拉列表中選擇汽車有什麼用處？ – trincot

更多一種高精度代碼：

$(function() { 
    var value = 100; 
    $("#button1").click(function() { 
    if ($("#DropDown2").val() == "oneUsrInput") { 
     console.log(); 
     $("<option value=" + (value++) + ">" + $("#TextBoxId").val() + "</option>").appendTo("#list2"); 
    } else if ($("#DropDown2").val() == "twoAutoPopulate") { 
     $("#list1 > option:selected").each(function() { 
     $(this).remove().appendTo("#list2"); 
     }); 
    } 
    }); 

    $("#button2").click(function() { 
    $("#list2 > option:selected").each(function() { 
     $(this).remove().appendTo("#list1"); 
    }); 
    }); 
    $("#DropDown2").on('change', function() { 
    if ($("#DropDown2").val() == "oneUsrInput") { 
     $("#TextBoxId").show(); 
     $("#list1").parent().hide(); 
    } else if ($("#DropDown2").val() == "twoAutoPopulate") { 
     $("#TextBoxId").hide(); 
     $("#list1").parent().show(); 
    } 
    }) 
});

你需要更多的幫助？或者你可以繼續？

JSFIDDLE

來源

2016-05-15 11:33:59

爲什麼不復制代碼來回答並讓它們都住在這裏？ – mplungjan

@mplungjan：沒有找到你 –

你創建了一個小提琴，而不是點擊「複製代碼段來回答」並修改。這就保留了答案和一個實例：SO – mplungjan

我做了一些修改自己的代碼：

$(function(){ 
    $("#button1").click(function(){ 
      if($('.userArea').hasClass('twoAutoPopulate')){ 
      $("#list1 > option:selected").each(function(){ 
       $(this).remove().appendTo("#list2"); 
       console.log($(this)); 
      }); 
     } 
     else if($('.userArea').hasClass('oneUsrInput')){ 
      $('#list2').append($('<option>', { 
       value: $('#TextBoxId').val(), 
       text : $('#TextBoxId').val() 
      })); 
      $('#TextBoxId').val('') 
     } 
    }); 

    $("#button2").click(function(){ 
      if($('.userArea').hasClass('twoAutoPopulate')){ 
      $("#list2 > option:selected").each(function(){ 
       $(this).remove().appendTo("#list1"); 
      }); 
     } 
    }); 
}); 

$("#DropDown2").on('change', function() { 
    $('.userArea').fadeIn(300); 
    if($("#DropDown2").val() == "oneUsrInput") { 
    $('.userArea').addClass('oneUsrInput').removeClass('twoAutoPopulate'); 
    } 
    else if($("#DropDown2").val() == "twoAutoPopulate") { 
    $('.userArea').addClass('twoAutoPopulate').removeClass('oneUsrInput'); 
    } 
});

，但我也做了一些修改，以你的CSS和HTML，請聯繫您的演示在這裏：https://jsfiddle.net/IA7medd/e6v3zvzn/

來源

2016-05-15 11:55:04

在javascript中選擇的動作

回答

相關問題