I have multiple features that have multiple options that need to be updated when an option is selected. I also need to pass a third piece of data through the attribute element.
.getElementById() works for a single dropdown menu, but how do I get it to work when there are multiple menus on the page?
I have tried var e = document.getElementsByClassName("testClass"); which did not work.
I also tried to create optionsText & optionsValue in the same way that optionsFtr is created with var optionsValue = $('option:selected', this).value; and that didn't work either.
http://jsfiddle.net/8awqLek4/4/
HTML Code
<ul>
<li>
<div class="ftrsTitle">BODY</div>
<select class="testClass" id="testId">
<option>Select</option>
<option ftr="bod" value="blk">Black</option>
<option ftr="bod" value="grn">Kelly Green</option>
<option ftr="bod" value="red">Red</option>
<option ftr="bod" value="roy">Royal</option>
</select>
</li>
<li>
<div class="ftrsTitle">TRIM</div>
<select class="testClass">
<option>Select</option>
<option ftr="trm" value="blk">Black</option>
<option ftr="trm" value="grn">Kelly Green</option>
<option ftr="trm" value="red">Red</option>
<option ftr="trm" value="roy">Royal</option>
</select>
</li>
</ul>
<div id="vars"></div>
Javascript Code
$(document).ready(function () {
$("select").on('change', function () {
var e = document.getElementById("testId");
var optionsText = e.options[e.selectedIndex].text;
var optionsValue = e.options[e.selectedIndex].value;
var optionsFtr = $('option:selected', this).attr('ftr');
$("#vars").html("<p>optionsText: " + optionsText + "</p><p>optionsValue: " + optionsValue + "</p><p>optionsFtr: " + optionsFtr + "</p>");
});
});
To read select value you can simply use $(this).val(). To get selected option label you should use text() method.
Fixed code looks like this:
$("select").on('change', function () {
var optionsText = $('option:selected', this).text();
var optionsValue = $(this).val();
var optionsFtr = $('option:selected', this).attr('ftr');
$("#vars").html("<p>optionsText: " + optionsText + "</p><p>optionsValue: " + optionsValue + "</p><p>optionsFtr: " + optionsFtr + "</p>");
});
Demo: http://jsfiddle.net/8awqLek4/3/
This should do it:
$(document).ready(function(){
$("select").on('change', function(){
var e = $(this).find("option:selected");
$("#vars").html("<p>optionsText: " + e.text() + "</p><p>optionsValue: " + $(this).val() + "</p><p>optionsFtr: " + e.attr("ftr") + "</p>");
});
});
use the this keyword. Than you can access the select targeted, and with find in combination with the :selected selector you can find the option element currently selected.
http://jsfiddle.net/8awqLek4/5/
Related
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();
I currently have this here working..
$(document).ready(function() {
$("#image").change(function() {
$("#imagePreview").empty();
$("#imagePreview").append("<img src=\"" + $("#image").val() + "\" />");
});
});
<select name="image" id="image" class="inputbox" size="1">
<option value="imageall.jpg" selected> - All - </option>
<option value="image1.jpg">image1.jpg</option>
<option value="image2.jpg">image2.jpg</option>
<option value="image3.jpg">image3.jpg</option>
</select>
<div id="imagePreview">
</div>
from this previous question:
Previous Question
I was wondering how can I populate the from a jQuery Array instead?
How could I do that? So basically the values and name from an array
This is the example in Fiddle i will be using Example Working
function populateSelect(el, items) {
el.options.length = 0;
if (items.length > 0)
el.options[0] = new Option('please select', '');
$.each(items, function () {
el.options[el.options.length] = new Option(this.name, this.value);
});
}
As seen here:
Using javascript and jquery, to populate related select boxes with array structure
You may want to retrieve names and values from JSON array this way.
var image_maps = {image1: "image1.jpg", image2: "image2.jpg"};
$.each(image_maps , function(name, value) {
alert("name: " + name + " value: " + value);
});
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
I'm beginning in JQuery, and I'd like to know if there is a way to send a selected item from a selectlist to a JQuery function.
So, here is the fiddle I've used :
http://jsfiddle.net/YCPM7/7/
I'd like to know if there is a way to replace the 'option:select' that I've set inside the call of the function.
Here is a part of the code that's on the fiddle :
<select id="StateSelection1" name="StateSelection">
<option value="1">state 1</option>
<option value="2">state 2</option>
<option value="3">state 3</option>
<option value="4">state 4</option>
<option value="5">state 5</option>
</select>
</td><td>
<input type="button" value="envoi" class="bouton" name="test" onclick="switchDiv(1, 'option:select')"/>
the '1' that you can see inside "switchDiv(1, 'option:select')" is not really important. That's an id that will be generated by razor (vb.net).
Easy do. First of all, put an ID to the button. Let's call it btnTest.
And now, to the jQuery part, use this :
$("#btnTest").click( function() {
alert($("#StateSelection1 option:selected").text());
});
This will get the Text of the select, to get the index use val() instead of text()
I've tried not to edit the HTML you've shown in your jsfiddle too much, only adding the .js-target, .js-1 and .js-2 classes to help explain what's being done.
The below bit of jQuery should hide all of the divs to begin with, and then when clicking on one of the buttons, hide them all again and just display the div whose option was selected.
$(".js-target").hide();
$(".bouton").on("click", function() {
$this = $(this);
if ($this.hasClass("js-1")) {
number = "1";
} else if ($this.hasClass("js-2")) {
number = "2";
}
target = $('#StateSelection' + number + ' option:selected').val();
$(".js-target").hide();
$("#" + number + "/" + target).show();
});
The fiddle can be viewed here.
once u get the value to select u can use
$("#btnTest").click( function() {
$("#StateSelection1").val(YOUR_VALUE);
}
Finally I choose to do this with a onClick method, which seemed to be a lot easier :
<script type="text/javascript">
function switchDiv(idCont) {
value = $('#DivSelection' + idCont + ' option:selected').val();
alert("contactid = " + idCont + " DivSelected = " + value);
$("#" + idCont + "1").hide();
$("#" + idCont + "2").hide();
$("#" + idCont + "3").hide();
$("#" + idCont + "4").hide();
$("#" + idCont + "5").hide();
$("#" + idCont + "6").hide();
$("#" + idCont + "7").hide();
$("#" + idCont + "8").hide();
$("#" + idCont + "9").hide();
$("#" + idCont + value).show();
};
</script>
<input id=#item.idContact type="button" value="Envoyer" class="bouton" onclick="switchDiv(#item.idContact)" />
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);
});