javascriptでの選択のアクション

Question

私は次の問題があります：

1）車のいくつかの名前でDropDown1があります。以下は、それぞれの値の選択に起こるべき、DropDown2で

：：私は2つの値を持つDropDown2を持って

2）

a）の変数UserInput、左側の複数選択ボックスを選択するには、隠されるはずですし、 同じ場所に、テキストボックスが表示されます。ユーザーはテキストボックスに任意の車名を書き込んでから、左から右のボタンを使用してその値を右手側の選択ボックスに移動できます。この場合、右から左のボタンは無効にする必要があります。

b）自動集計を選択すると、テキストボックスと同じ場所に複数選択ボックスが表示され、テキストボックスが非表示になります。複数選択ボックスには、DropDown1からのカーリストが入力されます。ユーザーは、左から右、右から左に車を選択して移動できる必要があります。

Javascriptを初めて使用しています。誰かがこれで私を助けてくれますか？

JSFiddle

$(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>

Answer 1

での作業ですそれを行うスニペット。また、あなたがリストに二度同じテキストを追加することができないことを確認します

$(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>

Answer 2

もっとprecisedコード：

$(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

Answer 3

私はあなたのコードにいくつかの編集をやった：

$(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/