Solved

dropdown list to append :(

Posted on 2014-03-26
9
373 Views
Last Modified: 2014-03-26
Hi,

I have a dropdown list when the user select something from it it should populate the selection to the multi select list.

here's what I have that does not work at all :(

Thanks,
Lulu

$('#SelectSegment').change(function(){	
var selectedGroups = $("#SelectSegment option:selected");
	$.each(selectedGroups, function(index, value) {
		var Companyname = $(value).attr('data-Companyname');
		if ($('#DispSelectedGroupBox option[data-Companyname="' + Companyname + '"]').length > 0)
		{
			alert("Already filtering on " + Companyname);
			}
			else {
		$('#DispSelectedGroupBox').append(value);	
			}
}); 

<SELECT style="WIDTH: 195px" id=SelectSegment name=SelectSegment> <OPTION selected value="" data-Companyname="">Select ...</OPTION> <OPTION value="4;Auto / URMBT" data-Companyname="Auto / URMBT">Auto / URMBT</OPTION> <OPTION value=3;IBU data-Companyname="IBU">IBU</OPTION> <OPTION value="2;Key &amp; Large" data-Companyname="Key &amp; Large">Key &amp; Large</OPTION> <OPTION value="1;Middle &amp; Small" data-Companyname="Middle &amp; Small">Middle &amp; Small</OPTION></SELECT>



       <select name="DispSelectedGroupBox" id="DispSelectedGroupBox" size="180" multiple="multiple" class="SearchBySelect5"  style="height:100px; width:250px;background-color:#f8fafc;"> </select>

Open in new window

0
Comment
Question by:lulu50
  • 5
  • 4
9 Comments
 
LVL 5

Expert Comment

by:jayakrishnabh
ID: 39956325
function changeselection() {
            var selectedtext = $("#SelectSegment").find('option:selected').text();
            if (selectedtext != null || selectedtext != undefined || selectedtext != "") {
                var companyname = $('#SelectSegment :selected').val();
                var companytext = $('#SelectSegment :selected').text();
                if (companyname != '') {
                    if ($('#DispSelectedGroupBox option[data-companyname="' + companytext + '"]').length > 0) {
                        alert("Already filtering on " + companytext);
                    } else {
                        $('#DispSelectedGroupBox').append('<option value="' + companytext + '" data-companyname="' + companytext + '">' + companytext + '</option>');
                    }
                } else {
                    alert('Default option selected');
                }
            }
        }
0
 

Author Comment

by:lulu50
ID: 39956350
jayakrishnabh,

Thank you it works but, I forgot to say that I want to clear what's inside  (DispSelectedGroupBox)
before append.

so, I guess I don't need to validate since I am deleting what's in the multi select!!!
0
 
LVL 5

Expert Comment

by:jayakrishnabh
ID: 39956374
sorry lulu, dint get you exactly. what do you wanna clear before each append?
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

Author Comment

by:lulu50
ID: 39956388
I want something like this but my changes doesn't work.

just to delete what's in the multiselect box before the user can append to it.


function changeselection() {
            var selectedtext = $("#SelectSegment").find('option:selected').text();
var multiSelect = $("#DispSelectedGroupBox").find('option:selected').text();

            if (selectedtext != null || selectedtext != undefined || selectedtext != "") {
                var companyname = $('#SelectSegment :selected').val();
                var companytext = $('#SelectSegment :selected').text();
                if (multiSelect != '') {
                		$("#DispSelectedGroupBox option:selected").remove();
                        $('#DispSelectedGroupBox').append('<option value="' + companytext + '" data-companyname="' + companytext + '">' + companytext + '</option>');
            }
        } 

Open in new window

0
 
LVL 5

Expert Comment

by:jayakrishnabh
ID: 39956433
function changeselection() {
            var selectedtext = $("#SelectSegment").find('option:selected').text();
            var multiSelect = $("#DispSelectedGroupBox").find('option:selected').text();

            if (selectedtext != null || selectedtext != undefined || selectedtext != "") {
                var companyname = $('#SelectSegment :selected').val();
                var companytext = $('#SelectSegment :selected').text();
                if (companyname != '') {
                    $('#DispSelectedGroupBox option[data-companyname="' + companytext + '"]').remove();
                    $('#DispSelectedGroupBox').append('<option value="' + companytext + '" data-companyname="' + companytext + '">' + companytext + '</option>');
                }
            }
        }
0
 

Author Comment

by:lulu50
ID: 39956460
jayakrishnabh,

I am sorry, I attached an image to explain what I want.

remove
0
 
LVL 5

Accepted Solution

by:
jayakrishnabh earned 500 total points
ID: 39956502
replace $('#DispSelectedGroupBox option[data-companyname="' + companytext + '"]').remove();
with  $('#DispSelectedGroupBox').html('');

hope this is what you are looking for :)
0
 

Author Comment

by:lulu50
ID: 39956515
jayakrishnabh,

Yes, that is exactly what I want!!!!!!!!!!

both works:
$('#DispSelectedGroupBox').html('');
or
$('#DispSelectedGroupBox option[value!="0"]').remove();

Thank you for all your help.

lulu
0
 

Author Closing Comment

by:lulu50
ID: 39956519
Excellent!!!!!!

Thank you :)
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question