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.
Related
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();
}
});
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!
I'm trying to get the value of a dropdown on change (and then change the values in a second dropdown).
EDIT: Thanks for all the replies, i've updated to add the () but the code is returning nothing, not null or undefined just a blank alert window
However when I alert it out the attr(value) is undefined.
Any ideas on what i'm missing?
Here is my code:
<script type="text/javascript">
$(document).ready(function() {
var roomID = "0"
$('.dropone').load('ajaxdropdown.aspx');
$('.droptwo').load('ajaxdropdown.aspx?drpType=room&roomid=' + roomID);
$('.dropone').change(function() {
var ts = new Date().getTime();
alert($(this).val)
$(".droptwo").empty();
$(".droptwo").load("ajaxdropdown.aspx?drpType=room&roomid=" + $(this).attr("value") + "&ts=" + ts);
});
});
</script>
val is a method, not a property.
use it like val()
If you are using it many places, i would assign it to a local variable and use it thereafter.
Also you can use the $.now() function to get the unique time stamp. It is equal to DategetTime();
$('.dropone').change(function() {
var item=$(this);
alert(item.val())
$(".droptwo").empty();
$(".droptwo").load("ajaxdropdown.aspx?drpType=room
&roomid=" +item.attr("value") + "&ts=" + $.now());
});
$('.dropone').change(function() {
var val = $(this).val();
// OR
var val = this.value;
})
You must obtain the value using a method, not a property. Use this:
alert($(this).val())
Add round brackets to your val: alert($(this).val())
You can also obtain custom attributes from the dropdown as below;
$('.someclass').change (function () {
var val = this.value;
alert(val); //selected value
var element = $(this).find('option:selected'); // assign selected element
var myTag = element.attr("aTag"); // get attribute by name
alert(myTag);
});
<option name='somename' id='someid' aTag='123' value='XYZ'>XYZ</option>
Check jQuery and Javascript methods here to get Single/ Multiple selected values in the Drop Down
Demo Link
jQuery Method:
Method to get Selected Value from a select box:
HTML
<select id="singleSelectValueDDjQuery" class="form-control">
<option value="0">Select Value 0</option>
<option value="8">Option value 8</option>
<option value="5">Option value 5</option>
<option value="4">Option value 4</option>
</select>
<input type="text" id="textFieldValueJQ" class="form-control"
placeholder="get value on option select">
jQuery
$("#singleSelectValueDDjQuery").on("change",function(){
//Getting Value
var selValue = $("#singleSelectValueDDjQuery").val();
//Setting Value
$("#textFieldValueJQ").val(selValue);
});
Method to get Selected Value Option Text from a select box:
HTML
Select Value 0
Option value 8
Option value 5
Option value 4
<input type="text" id="textFieldTextJQ" class="form-control"
placeholder="get value on option select">
jQuery
$("#singleSelectTextDDjQuery").on("change",function(){
//Getting Value
var selValue = $("#singleSelectTextDDjQuery :selected").text();
//Setting Value
$("#textFieldTextJQ").val(selValue);
});
I'm not sure why this isn't working. Anyone care to take a stab?
I have a form with the below. When the user selects the "disabled" option in #frmcomments, I'd like #frmstatus to change to the option value of private.
<label for="type">Comments:</label>
<select class="sort-select" id="frmcomments" name="frmcomments">
<option value="enabled">Allow Comments</option>
<option value="disabled">No Comments</option>
</select>
<label for="type">Status:</label>
<select class="sort-select" id="frmstatus" name="frmstatus">
<option value="public">Anyone can see</option>
<option value="private">Only I can see</option>
</select>
I'm using the following jquery, but it's failing?
$('#frmcomments').change(function() {
var thistype = $(this).find(":selected").val();
if(thistype=="disabled") {
$("#frmstatus").val("private");
}
return false;
});
Check your thistype value. You should be able to call val() on the select and you shouldn't have to call .find(":selected") to get the selected list item.
$('#frmcomments').change(function() {
var thistype = $(this).val();
if(thistype=="disabled") {
$("#frmstatus").val("private").change();
}
return false;
});
var thistype = $(this).find(":selected").val();
try this
var thistype = $(this).val();
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();