I need to get the value of the selected option (when changed) in a select list and change the text in a span next to the select list. The problem is I don't know the id of the select list. There are a lot of different select lists on the page (5-25+) and they are all created dynamically, and so I can't have the id specified in the .change(). Here is what I have:
JavaScript:
$("select").change(function () {
var str = "";
str = $("select option:selected").text();
$(".out").text(str);
}).trigger('change');
(Of course this doesn't work, puts all of the select values in each span.)
HTML:
<select name="animal[]">
<option value="dog">dog</option>
<option value="cat">cat</option>
<option value="bird">bird</option>
<option value="snake">snake</option>
</select>
<span class="out"></span>
What am I missing?
Try something like this:
$("select").change(function () {
var txt = $(this).val();
$(this).next('span.out').text(txt);
}).trigger('change');
Try this:
$("select").each(function(){
var select = $(this),
out = select.next();
select.change(function () {
out.text(select.val());
});
}).trigger('change');
Try this:
$("select").change(function () {
var str = "";
str = $(this).find(":selected").text();
$(".out").text(str);
}).trigger('change');
Sounds like you want to use jQuery's next
You can get the changed element using $(this) within the event callback. Try changing the line
str = $("select option:selected").text();
to
str = $(this).find("option:selected").text();
Related
I'm using selectize plugin and trying to alert custom data-attribute.
I tried with several method but it alway indefined result
My select list :
<select name="location_work{{counter}}" id="location_work{{counter}}" class="list_type_op" data-md-selectize-inline required>
<option data-data='{"param": 0}' value="1">Construction</option>
<option data-data='{"param": 1,"name":"x"}' value="2">Puchase</option>
<option data-data='{"param": 2,"name":"x-y"}' value="3">Warranty</option>
</select>
And my js function
$(document).on('change', '.list_type_op', function () {
var selected_option = this.value;
var nbParam = $('option:selected', this).attr('data-param');
alert(nbParam); //is indefined
});
Select list is in Estimated price section on Type Column
Here my jsfiddle : Jsfiddle
Finally i get value of attribute with this :
$(document).on('change', '.list_type_op', function () {
var selected_option = this.value;
var nbParam = $(".selectize-dropdown-content").find(`[data-value='${selected_option}']`).attr('data-param');
alert(nbParam);
});
I search attribute in html code.
I'd like to know if it's possible for a select box to have two functions.
1.Redirects automatically when selecting an option using value.
2.Load content via ajax into the closest div using data-file.
<select class="loadurl">
<option value="#">Select</option>
<option value="contact.php">Contact</option>
<option value="about.php">About</option>
<option data-file="fans.php">Fans</option>
</select>
<div class="area"></div>
But when I tried the following script, the ajax option (Fans) didn't work but attempted to redirect instead. May I know how to have two functions in just one select box? Here's a demo.
$(".loadurl").bind('change', function () {
var selected = $(this).find('option:selected');
var loadfile =selected.data('file');
var area = $(".area");
$(this).next(".area").load(loadfile);
area.empty();
});
$('.loadurl').bind('change', function () {
window.location.href = $(this).val();
});
You need to use a conditional choice here - if the selected option has data-file then load the target in the area else reload the page.
var area = $(".area");
$(".loadurl").on('change', function () {
var selected = $(this).find('option:selected');
var loadfile = selected.data('file');
if (loadfile) {
area.empty();
$(this).next('.area').load(loadfile);
} else {
window.location.href = $(this).val();
}
});
I need to make Select name with option value, to select a specific value or index. the data where comes from db in a value "{{design}}".
I do get the value currectly, but I dont manage to set "selected" on the currect option value.
here is the code:
console.log("{{design}}");
$(document).ready(function () {
var options = $('select').children('option');
var size = $('select').children('option').length;
for (i=0;i<size;i++)
{
if ( options[i].innerHTML==="{{design}}")
{
options.selectedIndex=i;
}
}
});
the html is :
<select name="design" required id="design" >
<option value="1">flowers</option>
<option value="2">classic</option>
<option value="3">roses</option>
</select>
I need to make to currect {{design}} value, lets say it's 2, so it will be <option value="2" selected>classic</option>`
thanks!
SOLVED
Hi, found the solution to the issue, if anyone eles goes into trouble.
$(document).ready(function () {
var options = $('select').children('option');
var size = $('select').children('option').length;
for (i=0;i<size;i++)
{
if ( $('select').children('option')[i].value === "{{design}}")
{
$('select').children('option')[i].selected=true;
}
}
});
the currect way is to find the right option value and then-> [i].selected=true
goodluck
Try this
var selectedvalue=2; //option with value 2 should be selected
$("#design option[value=selectedvalue]").attr("selected","selected");
Hope this helps...
If I understood right, you are on the right path just taking a minor detour. Try this:
if ( options[i].innerHTML==="{{design}}")
{
options.attr('selected', 'selected');
}
The example of .each() usage:
$(document).ready(function(){
$('select option').each(function(i){
if( i.value === "{{design}}"){
$(this).attr('selected','selected');
}
});
});
try this:
$(document).ready(function(){
$('select option').each(function(i){
//if this option contains the word "{{design}}" Then this is selected
if( $(this).html().indexOf("{{design}}") != -1)
$(this).attr('selected',true);
});
});
Hello everyone how can I get two values from different select boxes? I get first value in my select box but I can't get the second value from another select box.Here is my javascript code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var select = document.forms[0].sel;
var select2=document.forms[0].sel2;
select.onchange = function () {
var value = select.options[select.selectedIndex].value; // to get Value
alert(value);
}
select2.onchange = function () {
var value2 = select2.options[select2.selectedIndex].value; // to get Value
alert(value2);
}
});
</script>
<form>
<SELECT NAME="sel" onChange="split(selected value)">
<OPTION VALUE=1>Milk</option>
<OPTION VALUE=2>tea</option>
<OPTION VALUE=3>water</option>
<OPTION VALUE=4>coffee</option>
</SELECT>
</form>
<form>
<SELECT NAME="sel2" onChange="split(selected value)">
<OPTION VALUE=1>Milk</option>
<OPTION VALUE=2>tea</option>
<OPTION VALUE=3>water</option>
<OPTION VALUE=4>coffee</option>
</SELECT>
</form>
The second select box is in the second form. So:
var select2 = document.forms[1].sel2;
That said, you can actually use jQuery for these things:
// bind a change event handler to the second select
$("select").eq(1).on("change", function() {
alert( $(this).val() );
});
jQuery Tip - Getting Select List Values
var foo = [];
$('#multiple :selected').each(function(i, selected){
foo[i] = $(selected).text();
});
$(document).ready(function () {
$('#sel').change(function(){ $('#sel option:selected').val(); });
give id to your select control
<SELECT id="sel">
with help of jQuery ( i suggest the logic, not the solution )
$(document).on('change', 'select', function(){
var selecetdOption = $(this).val();
alert(selecetdOption );
});
Working Demo
You have wrong into your javascript because you have put
var select2=document.forms[0].sel2;
try to put
var select2=document.forms[1].sel2;
and it works!
How to determine what is selected in the drop down? In Javascript.
If your dropdown is something like this:
<select id="thedropdown">
<option value="1">one</option>
<option value="2">two</option>
</select>
Then you would use something like:
var a = document.getElementById("thedropdown");
alert(a.options[a.selectedIndex].value);
But a library like jQuery simplifies things:
alert($('#thedropdown').val());
Use the value property of the <select> element. For example:
var value = document.getElementById('your_select_id').value;
alert(value);
<select onchange = "selectChanged(this.value)">
<item value = "1">one</item>
<item value = "2">two</item>
</select>
and then the javascript...
function selectChanged(newvalue) {
alert("you chose: " + newvalue);
}
var dd = document.getElementById("dropdownID");
var selectedItem = dd.options[dd.selectedIndex].value;
Like this:
$dd = document.getElementById("yourselectelementid");
$so = $dd.options[$dd.selectedIndex];