Develop Reference

How to get the value of dropdown and display in label

I have a dropdown where I am filling the content with dynamic data and in the model I am appending my data to the dropdown
$("#dpp").append($("<option disabled></option>").val(0).html('Select Locations'));
$("#dpp").append($("<option selected='selected'></option>").val(1111).html('All'));
for (var i = 0; i < Location.length; i++) {
$("#dpp").append($("<option></option>").val(data[i].sno).html(data[i].name));
}
I am unable to get the value and text of the selected option by using a change handler.
I tried:
$('#dpp').change(function () {
var thisvalue = $(this + "option:selected").text();
alert(thisvalue);
});
and by default on page load All option selected in the dropdown.
How can I get that value or text and show it on the label?

For change event and document ready:
$(document).ready(function() {
getSelectData($('#dpp'));
});
$('#dpp').on('change', function() {
getSelectData($(this));
});
function getSelectData(el) {
var $option = el.find('option:selected');
var text = $option.text();
var val = $option.val();
alert('option text: ' + text + '; option value ' + val)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="name" id="dpp">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>

Use the below code for both purposes (on page load as well as on change event)
$(document).ready(function() {
var dppText= $("#dpp option:selected").text(); // to get text on page load
//to get text on change of drop-down
$(document).on('change','#dpp',function(){
var thisvalue = $(this + "option:selected").text();
alert(thisvalue);
});
});

You can use this:
$(document).on('change','#dpp',function(){
var thisvalue = $(this + "option:selected").text();
alert(thisvalue);
});
This will add change listener to the document level so you will be able to detect the change on dpp.

This will do it:
$("#dpp option:selected").val();

Appending a div (multiple times) in Jquery without cloning

I am still trying to work this out. Currently this is the way it looks, It works on JSFiddle but on my for it only clones once and the clone has data in it that when changed, changes the 1st item
I am trying to streamline my very large form to speed up the processes. I have a section that repeats multiple time that I want to reduce to having coded once with a button to add more if needed. The section cannot be cloned as each is separate and specific. Also note that they each need a unique identifier. As I have it not they ar "transectA", "transectB", etc. Below is a small snippet to give you an idea wof what I am working with. Each select actually has 12 options and there are 14 transects.
<div class="transect">
<select name="transectA" id="transectA">
<option value="">Transect A </option>
<option value = "RIGHT/SED-CORE">RIGHT/CORE</option>
<option value = "RIGHT/HOOP">RIGHT/HOOP</option>
<option value = "RIGHT/CHLPHL-1">RIGHT/TEMPLATE</option>
<option value = "RIGHT/NONE">RIGHT/NONE</option>
<option value = "CENTER/SED-CORE">CENTER/CORE</option>
<option value = "CENTER/HOOP">CENTER/HOOP</option>
<option value = "CENTER/CHLPHL-1">CENTER/TEMPLATE</option>
<option value = "CENTER/NONE">CENTER/NONE</option>
<option value = "LEFT/SED-CORE">LEFT/CORE</option>
<option value = "LEFT/HOOP">LEFT/HOOP</option>
<option value = "LEFT/CHLPHL-1">LEFT/TEMPLATE</option>
<option value = "LEFT/NONE">LEFT/NONE</option>
</select> </div>
I have attempted a couple of solutions (hide/show) & clone but neither give me a satisfactory result. All of the attempts I have tried with append seem to produce basically what the show/hide does.
<script>
$(document).ready(function() {
var $transect = $('.transect');
$transect.on('change', 'select', function() {
var $this = $(this),
$parent = $this.parent(),
$transects = $('.transect');
if($transects.length < 14 && !$parent.next('.transect').length) {
var ltr = String.fromCharCode(65 + $transects.length),
label = 'transect' + ltr;
$transect
.clone(true)
.find('select')
.attr('name', 'transect' + ltr)
.attr('id', 'transect' + ltr)
.find('option:eq(0)')
.text('Transect ' + ltr.toUpperCase())
.end()
.end()
.insertAfter($parent);
}
});
})
</script>
As always, your help will be greatly appreciated
Can anyone advise me why all of these solutions work in JSFiddle but not on my form. Even the script above works on the fiddle but only clones once on the form

you could do something like this:
var counter = 0
$('.add-new-button').click(function(){
$('#transectA').append('<option id="input ' + counter +'" value = "RIGHT/SED-CORE">RIGHT/CORE</option>');
counter++;
});
This will add a new option to #transectA. You can use this method to add form fields elsewhere as well. You can use the counter to make sure it has a unique ID or name or whatever. Good luck

You should be able to combine clone and some DOM manipulation to get the desired affect: http://jsfiddle.net/fjJfk/2/
But you'll likely need to make this example match your own markup/situation.
var $transect = $('._25');
$transect.on('change', 'select', function() {
var $this = $(this),
$parent = $this.parent(),
$transects = $('._25');
if($transects.length < 14 && !$parent.next('._25').length) {
var ltr = String.fromCharCode(65 + $transects.length);
$transect
.clone(true)
.find('select')
.attr('name', 'transect' + ltr)
.attr('id', 'transect' + ltr)
.find('option:eq(0)')
.text('Transect ' + ltr)
.end()
.end()
.insertAfter($parent);
}
});

You can use following;
HTML:
<div id="tempSelect" style="display:none">
<select name="transect" data-mini="true" id="transect">
<option value="">Transect_ </option>
<option value = "RIGHT/SED-CORE">RIGHT/CORE</option>
<option value = "RIGHT/HOOP">RIGHT/HOOP</option>
<option value = "RIGHT/CHLPHL-1">RIGHT/TEMPLATE</option>
<option value = "RIGHT/NONE">RIGHT/NONE</option>
</select>
</div
<fieldset>
<div class="_100">
</div>
</fieldset>
<input type="button" name="newSelect" id="newSelect" value="New"/>
JS:
$("#newSelect").on("click", function() {
var lastSelect = $("._100 select").last().attr("name");
if (lastSelect != undefined) {
var temp = lastSelect.split("_");
var id = parseInt(temp[1]) + 1;
} else {
var id = 0;
}
$("#tempSelect select").attr("name", "transect_" + id);
$("#tempSelect select").attr("id", "transect_" + id);
$("#tempSelect select option:first").text("Transect_" + id);
$("._100").append($("#tempSelect").html());
});
Here is working demo: jsfiddle

Remove item from second dropdown based on selection in First using Javascript

I have four dropdown, and I am manually filling them.
Now I want to add a javacsript that when I select first dropdown option, then in the second third fourth dropdowns, that item or option can be removed.
And same flow goes for second third and fourth and so on.
I am giving my code but till now, it is not working fine.
I am only tring for the first ladder, that is when option in first is selected then item removed from second, third and fourth dropdowns.
function RemoveItems(){
var List1 = document.getElementById("ddlSortField");
var sortList1 = List1.options[List1.selectedIndex].text;
var List2 = document.getElementById("ddlSortField2");
var sortList2 = List2.options[List2.selectedIndex].text;
List2.options.remove(sortList1);
var List3 = document.getElementById("ddlSortField3");
var sortList3 = List3.options[List3.selectedIndex].text;
List3.options.remove(sortList2);
var List4 = document.getElementById("ddlSortField4");
var sortList4 = List4.options[List4.selectedIndex].text;
List4.options.remove(sortList3);
}

In your code:
> function RemoveItems(){
Variable names starting with a capital letter are, by convention, reserved for constructors, so:
function removeItems() {
> var List1 = document.getElementById("ddlSortField");
> var sortList1 = List1.options[List1.selectedIndex].text;
So sortList1 will be a string.
> var List2 = document.getElementById("ddlSortField2");
> var sortList2 = List2.options[List2.selectedIndex].text;
> List2.options.remove(sortList1);
The remove method of the options collection takes a single parameter that is an index of one of the options. You have not shown what the value of sortList1 nor how many options List2 has. Note that the options collection is live, so if you remove an option, the indexes of other options may be adjusted so that they are contiguous from 0 to options.length - 1.

You can use such code : jsFiddle.
Basically, you first bind the change event to each list and when you change the value you hide these elements in all lists after...

I've made a slightly different one than #Muhammad Omair's, this one is a bit more dynamic. Note that this is jQuery
var removeSelection = function(select) {
$('select').filter(':not(#' + select.attr('id') + ')').each(function() {
var index = select.find(':selected').index();
$(this).find('option:eq(' + index + ')').remove();
});
};
$(function() {
$('select').change(function() {
removeSelection($(this));
});
});
And here's a jsfiddle of it http://jsfiddle.net/cA3F9/

Use jQuery to remove option
$(document).ready(function(){
$('#ddlSortField').change(function(){
var index = $("#ddlSortField option:selected").val();
$('#ddlSortField2 option:eq(' + index + ')').remove();
$('#ddlSortField3 option:eq(' + index + ')').remove();
$('#ddlSortField4 option:eq(' + index + ')').remove();
});
});
Note in your html your option value must be same like this:
<select id="ddlSortField">
<option value="1">test1</option>
<option value="2">test2</option>
<option value="3">test3</option>
</select>
<select id="ddlSortField1">
<option value="1">test1</option>
<option value="2">test2</option>
<option value="3">test3</option>
</select>

Getting a SelectList obejct from a ListBox and placing into an HTML Selection List

Say I have a ListBox populated with a name value pair SelectList(myUsers, "Key", "Value"):
#Html.ListBox("ListReviewers", (SelectList)ViewBag.ListOFReviewers, new { style = "width:120px;" })
I want to double click an option in this ListBox, and place it in a SelectionList like below:
<div class="selectedEmployees">
<select class="selectionList" multiple="multiple" name="AssignedReviewer" style="width:120px;">
<!--x.UserID, x.FirstName + " " + x.LastName) -->
<option value=""></option>
</select>
</div>
Once this collection is placed in the above, I want to store all the values in another SelectionList Collection for later use.
Here is the start of my jQuery code:
<script type="text/javascript">
$('#ListReviewers').dblclick(function (i, selected) {
//double click on this value of listbox of type SelectList(myUsers, "Key", "Value")
//store this value and text
var value = $(this).val;
//var empName = $(this).data[0];
var empName = $(selected).text();
alert(empName);
//append an option element <option value=""></option>
$('.selectionList').append('<option id="' + value + '">' + empName + '</option>');
});
I can get the value of the dblclicked collection object, but not the text of the collection object. Is there a better way to do this?

Try attaching your event to the option within the select itself. You can then use this to access it's properties.
$('#ListReviewers option').dblclick(function () {
var value = $(this).val();
var empName = $(this).text();
$('.selectionList').append('<option id="' + value + '">' + empName + '</option>');
});
Alternatively, you can use clone() and append() to move the option from one select to the other. This will save you having to worry about duplicate options being appended.
$('#ListReviewers option').dblclick(function () {
var $newOptions = $(this).clone(false);
$(this).remove();
$('.selectionList').append($newOption);
});

How to update <select> options in my case?

I have a select field and a button:
<select id="mylist"></select>
<input type="button" id="btn" value="update">
my js code:
var btn=$('#btn');
btn.click(function(){
var optionList = GET_LIST();// GET_LIST() returns a array of strings which is the option texts.
//How to use optionList to update the options in <select> ?
});
How to update my options list with optionList in select tag ?

EDIT: Based on note from #amsutil alternate using html:
var btn=$('#btn');
btn.click(function(){
var optionList = GET_LIST();
var select = $("#mylist");
select.html("");
var optionsHTML = "";
$.each(optionList, function(a, b){
optionsHTML += "<option>" + b + "</option>";
});
select.html(optionsHTML);
});
Try this:
var btn=$('#btn');
btn.click(function(){
var optionList = GET_LIST();
var select = $("#mylist");
select.empty();
$.each(optionList, function(a, b){
select.append("<option>" + b + "</option>");
});
});

If you are wanting to create select options from an array, your values and label text will match. These will need to be stored in an object if you want to have values and text be different:
var btn = $('#btn');
btn.click(function() {
var optionList = GET_LIST();
var element = $('#mylist');
$.each(optionList, function(index, value) {
element.append('<option value="' + value + '">' + value + '</option>');
});
});

I see a few answers using 'append', but this creates too many DOM manipulations. If you have a large number of values in your array, it could slow the site down. It's much better to store all of the new options in a string, and do one DOM manipulation at the end.
Demo: http://jsbin.com/ubotu4/

Using $.map() to convert an array of strings into an array of option elements:
var optionList = GET_LIST();
var options = $.map(optionList, function (item, i) {
return $('<option>', {text: item}); // Convert string into <option>
});
$('#mylist').empty().append(options); // Append to the <select>