Action on Select in javascript

Question

I have the following issue:

1) I have DropDown1 with some names of cars.

2) I have DropDown2 with two values:

In DropDown2, the following should happen on select of each values:

a) On selecting UserInput, the left hand side multiselect box should get hidden and in the same place, a textbox should appear. User can write any car name in the text box and then use the left to right button to move that value to right hand side select box. Right to left button should be disable in this case.

b) On selecting AutoPopulate, a multiselect box should appear on left hand side in the same place as the textbox and the textbox should get hidden. The multiselect box should get populated with car list from DropDown1. User should be able to select and move cars from left to right and right to left.

I am new to Javascript. Could someone please help me with this.

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>

Your fiddle was created wrongly. You needed to click the [JAVASCRIPT] button and use "In Head" instead of adding external script and use onload. Here is the fixed fiddle. I also added your code to a snippet in your question — mplungjan
– mplungjan, Commented May 15, 2016 at 11:27

Parag Bhayani · Accepted Answer · 2016-05-15 11:49:26Z

1

More precised code:

$(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();
    }
  })
});

Do you need more help? or you can go ahead?

JSFIDDLE

edited May 15, 2016 at 11:49

answered May 15, 2016 at 11:33

Parag Bhayani

3,3302 gold badges32 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

mplungjan Over a year ago

Why not copy code to answer and have it all live here?

Parag Bhayani Over a year ago

@mplungjan: Didn't get you

mplungjan Over a year ago

You create a fiddle instead of clicking "copy snippet code to answer" and modify. That keeps the answer and a working example here at SO

Vicky Over a year ago

@ParagBhayani: Yes.. I need more help. How do I attach my textbox to the button action? I was able to make that work for the multiselect. And how do I update my multiselect with values from DropDown1? As you can see it has static values right now.

Vicky Over a year ago

@ParagBhayani: Thanks.. I will figure out how to populate the multiselect with values of DropDown1,,,

|

trincot · Accepted Answer · 2016-05-15 12:13:08Z

0

Here is a working snippet that does that. It also verifies that you cannot add the same text twice to the list:

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

edited May 15, 2016 at 12:13

answered May 15, 2016 at 11:58

trincot

357k38 gold badges282 silver badges338 bronze badges

6 Comments

Vicky Over a year ago

Thanks.. any pointers on how to populate multiselect with values from DropDown1 ?

trincot Over a year ago

Does this mean you will have the same values in dropdown1 and the multiselect? If so, and if the multiselect is re-populated, do you want the right-side to be cleared? Or if not, is it not a problem to have the same values in the right list (previously selected) and also in the left one?

trincot Over a year ago

Anyway, I have updated the snippet: it now loads the car names in the multi select list. As it is kept in place, even when hidden, it is not repopulated again. I don't think this is necessary. Can you confirm? Also what is the use of selecting a car in the first drop down list?

Vicky Over a year ago

Thanks... you are right.. Multiselect should be dependent on DropDown1. So on page load, based on the option values coming in DropDown1, the multiselect should get populated. User can select 1 value from DropDown1 and multiple from DropDown2 and TextBoxes. Finally everything will be part of a Post Submit.

trincot Over a year ago

Wait: do you want the list of values to be different depending on the selection in dropdown1? If so, can you provide the values for each possible selection? I assume they are different per selected car? For instance what do you want have as options for Volvo, and what do want if they select Saab? Another list? Should the change of car selection have any effect?

|

Ahmed Salama · Accepted Answer · 2016-05-15 11:55:04Z

I did some edits to your code :

$(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');
  }
});

but I also made some edits to your css and HTML so see your demo here : https://jsfiddle.net/IA7medd/e6v3zvzn/

Collectives™ on Stack Overflow

Action on Select in javascript

3 Answers 3

6 Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related