Trying to access data-attribute value of clicked option . - javascript

I have several 'page' options in select element, each option has values derived from database.
<select name="page_id" title="page id" class="form-control" id="page">
#forelse($pages as $page)
<option data-slug="{{$page->slug}}" {{($page->id==$c_page->id) ? 'selected' : ''}} value="{{$page->id}}">{{$page->title}}</option>
#empty
<option value=""> No Pages Found</option>
#endforelse
</select>
I'm trying to get 'slug'value of 'clicked/chosen' option into javascript.
$(function () { /* DOM ready */
$("#page").change(function () {
alert($('option').data('slug'));
});
});
But this only returns the 'slug' value of 'page' option that is at the top. How can I get the value from other option elements?

You need to use :selected selector and use this the current element context (for which event handler is attached).
$("#page").change(function () {
var slug = $('option:selected', this).data('slug');
});
As a runnable snippet:
$(function() {
$(".page").change(function() {
var slug = $('option:selected', this).data('slug');
console.log('slug: ' + slug);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select class="page">
<option data-slug="first option">first
<option data-slug="second option">second
<option data-slug="third option">third
</select>
<select class="page">
<option data-slug="first option of second page">first
<option data-slug="second option of second page">second
<option data-slug="third option of second page">third
</select>

Related

display option value in div on change

how to display selected value of option in an empty div with jquery?
$(document).ready(function() {
let from_select = $('#from_select');
let from_text = $('#from');
//example#1
from_select.on('change', function() {
from_text.append($("option:selected").val());
})
//example#2
from_select.on('change', function() {
from_text.append($("#test option:selected").val());
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="from_select">
<option id="test" value="gel" selected data-buy="1" data-sell="1">GEL</option>
<option id="test" value="usd" data-buy="" data-sell="">USD</option>
<option id="test" value="eur" data-buy="" data-sell="">EUR</option>
<option id="test" value="rub" data-buy="" data-sell="">RUB</option>
</select>
<div id="from"></div>
in example#1 it works, but then i cant remove last value which was passed in #from div.
but in example#2 it doesn't work, i dont know why but it's not gettind id #test.
Example#1
You could read the selected value from $(this).val().
you should use .html instead of .append.it will replace the previously added value from the form
Example#2
And second one not working because id of #tornike element not there in your markup. And this not necessary. because already you are in onchange event so you will get the value from the event . So id target was unnecessary
$(document).ready(function() {
let from_select = $('#from_select');
let from_text = $('#from');
//example#1
from_select.on('change', function() {
from_text.html($(this).val());
})
//not necessary
//example#2
// from_select.on('change', function() {
// from_text.append($("#tornike option:selected").val());
//})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="from_select">
<option id="test" value="gel" selected data-buy="1" data-sell="1">GEL</option>
<option id="test" value="usd" data-buy="" data-sell="">USD</option>
<option id="test" value="eur" data-buy="" data-sell="">EUR</option>
<option id="test" value="rub" data-buy="" data-sell="">RUB</option>
</select>
<div id="from">
</div>
You can use any of the below option
$(this).val()
from_select.val()

How to trigger an Event using an ID in a Select list

I have a select list that triggers DIV tag visibility, which works great, but once I added a new select list it started conflicting with the first list. I need to be able to use the first list to trigger the toggle event independently of any other lists in the code.
I'm to use the select list using a specific ID to properly toggle the DIV visibility but I can't seem to get it right.
$(document).ready(function () {
$("select").change(function () {
$(this).find("option:selected").each(function () {
var optionValue = $(this).attr("value");
if (optionValue) {
$(".divToggle").not("." + optionValue).hide();
$("." + optionValue).show();
} else {
$(".divToggle").hide();
}
});
}).change();
});
This is the select options:
<select id="transferOptions" class="form-control" name="transferoptions" aria-label="Transfer Options" tabindex="">
<option value="fundTransferOption" selected>Select an Option</option>
<option value="achTransfer">ACH Transfer</option>
<option value="flashFundsTransfer">Flash Transfer</option>
</select>
<select id="ConflictingSelectOptionsAlsoCausingDIVToggling">
<option>Choose</option>
<option>Blah</option>
<option>Blah 2</option>
</select>
<div class="achTransfer divToggle">On select show Thing 1</div>
<div class="flashFundsTransfer divToggle">On select show Thing 2</div>
I want to use the Javascript above to specifically work the select list that use the "id="transferOptions", so as I add other select lists to the code it won't conflict with the transferOptionselect list, thus triggering the DIV's in the page.
Use the select ID with its CSS selector #transferOptions. Also changed some logic for you to check out:
$(document).ready(function() {
$("#transferOptions").change(function() {
var optionValue = $(this).val(); // or use javascript: this.value
$(".divToggle").hide(); // hide all .divToggle elements
if (optionValue) { // in your example this is always true
$("." + optionValue).show(); // show the matching element
}
}).change(); // trigger change after document is ready
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="transferOptions" class="form-control" name="transferoptions" aria-label="Transfer Options" tabindex="">
<option value="fundTransferOption" selected>Select an Option</option>
<option value="achTransfer">ACH Transfer</option>
<option value="flashFundsTransfer">Flash Transfer</option>
</select>
<select id="ConflictingSelectOptionsAlsoCausingDIVToggling">
<option>Choose</option>
<option>Blah</option>
<option>Blah 2</option>
</select>
<div class="achTransfer divToggle">On select show Thing 1</div>
<div class="flashFundsTransfer divToggle">On select show Thing 2</div>
You can get the element that event is referring to using event.target instead of using this which in your case refers to the callback function, see example below:
$('select').change(event => {
console.log(event.target.id);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select1">
<option>foo</option>
<option>bar</option>
<option>baz</option>
</select>
<select id="select2">
<option>quux</option>
<option>xyzzy</option>
</select>

Get the name of all selected items from select multiple="multiple" options dropdown

I am trying to get the name of all selected items from select multiple="multiple" options dropdown.
In my html page, I have the following code snippet:
<select id="ddlCategory" ng-model="myCategory.myCategoryName" multiple>
<option selected="selected" value="1">Washroom</option>
<option value="2">Restaurant</option>
</select>
In my JS file, I have the following code snippet:
var categoryNameArray = $('#ddlCategory').val();
console.log("category = " + categoryNameArray[0];
However, the variable categoryNameArray only gives me the array of the selected items, what I want is the name of the selected items. Can someone tell me a way how I can make this work? Thanks!
Since val isn't giving you what you want, I'm going to assume you want an array of the text of the selected items.
You can get that like this:
var selectedTextArray = $("#ddlCategory option:selected").map(function() {
return $(this).text();
}).get();
That finds all the selected items, then uses map to get the text of each of them (wrapped in a jQuery object), then uses get to turn that jQuery object into an array.
You can probably use return this.text; rather than return $(this).text();, since HTMLOptionElement has a text property (which most elements don't), but I'd be sure to test with my target browsers to be sure.
Example:
$("#btn").on("click", function() {
var selectedTextArray = $("#ddlCategory option:selected").map(function() {
return $(this).text();
}).get();
console.log(selectedTextArray);
});
Select some items, then click
<input type="button" id="btn" value="here">
<br>
<select id="ddlCategory" ng-model="myCategory.myCategoryName" multiple>
<option value="1">Washroom</option>
<option value="2">Restaurant</option>
<option value="3">Service Station</option>
<option value="4">Drive-Thru</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Example with this.text instead of $(this).text():
$("#btn").on("click", function() {
var selectedTextArray = $("#ddlCategory option:selected").map(function() {
return this.text;
}).get();
console.log(selectedTextArray);
});
Select some items, then click
<input type="button" id="btn" value="here">
<br>
<select id="ddlCategory" ng-model="myCategory.myCategoryName" multiple>
<option value="1">Washroom</option>
<option value="2">Restaurant</option>
<option value="3">Service Station</option>
<option value="4">Drive-Thru</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
val() returns the values on the selected options, in your case 1, 2 .... You should use text() to get the names of the selected options. You can loop through all selected options using each() method and get the selected values using text():
$('a').on('click', function(e) {
e.preventDefault();
$('#ddlCategory option:selected').each(function(i, selected) {
console.log($(selected).text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="ddlCategory" ng-model="myCategory.myCategoryName" multiple>
<option selected="selected" value="1">Washroom</option>
<option value="2">Restaurant</option>
</select>
Send
You can read more on how val() works here.
You can read more on how text() works here.
Try this:
var categoryNameArray =
$('#ddlCategory option:selected').map(function(){
return this.text;
}).get();
console.log("category = " + categoryNameArray);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="ddlCategory" ng-model="myCategory.myCategoryName" multiple>
<option selected="selected" value="1">Washroom</option>
<option selected="selected" value="2">Restaurant</option>
<option value="3">Coffee Shop</option>
<option value="4">Hotels</option>
</select>
Easy way to get all selected value is $('#ddlCategory').val();

jquery get selected values of multiple select boxes

i have this form ..
<form method="post" action=''>
<select class="first">
<option value="0">choose ...</option>
<option value="1">Hello</option>
<option value="3">It's</option>
</select>
<select class="second">
<option value="0">choose ...</option>
<option value="2">World</option>
<option value="4">me</option>
</select>
<input type="text" class="dest" value="" />
</form>
and would like to dynamically gather selected informations with jQuery, because I need to decide on the selected values ...
When you select specific combination of OPTION values (lets say Hello + World) it should add some value to INPUT.dest and lock it (disable from editing) ...
But I can't make it work ... What I have, is that on each change of each select (separately only) i can map the actual value
$(document).ready(function () {
$(".first").change(function () {
var option = $(this).find("option:selected").val();
$(".dest").val(option);
});
$(".second").change(function () {
var option2 = $(this).find("option:selected").val();
$(".dest").val(option2);
});
});
Here is the live demo in fiddle
Do you know what am I missing? I know it will be just a little thing .. thank you
I would generalize it and use one event listener, and then gather the combination and do whatever:
$("select").change(function () {
var first = $(".first").find("option:selected").val();
var second = $(".second").find("option:selected").val();
if(first == 1 && second == 2)
$(".dest").val("Hello world").prop("disabled",true);
else
$(".dest").val("Something else").prop("disabled",false);
});
http://jsfiddle.net/cxx428af/3/

How do I get selected value from a bootstrap select drop down

I'm trying to get the selected text, not value, from my bootstrap drop down, but my .text() statement is returning a string that contains all the values with a '\n' in between.
Here is my rendered html
<select class="form-control" id="SpaceAccommodation" name="YogaSpaceAccommodation">
<option selected="selected" value="0">1-4</option>
<option value="1">5-9</option>
<option value="2">10-15</option>
<option value="3">16-20</option>
<option value="4">20+</option>
</select>
Here is my javascript, but selectedText returns '5-9\n10-15\n16-20\n20+'
I want it to return 5-9 or 10-15, etc..
$('#SpaceAccommodation').change(function () {
var selectedText = $(this).text();
});
You can get the selected value's text with $(this).find("option:selected").text().
$('#SpaceAccommodation').change(function () {
var selectedText = $(this).find("option:selected").text();
$(".test").text(selectedText);
});
<script src="https://code.jquery.com/jquery-1.6.4.min.js"></script>
<select class="form-control" id="SpaceAccommodation" name="YogaSpaceAccommodation">
<option selected="selected" value="0">1-4</option>
<option value="1">5-9</option>
<option value="2">10-15</option>
<option value="3">16-20</option>
<option value="4">20+</option>
</select>
<div class="test"></div>
Fiddle for you
$(document).ready(function () {
$('.chzn-select').change(function () {
alert( $('.chzn-select option:selected').text());
});
});
<select id="second" class="chzn-select" style="width: 100px">
<option value="1">one</option>
<option value="2">two</option>
</select>
This is based on the css3 psuedo-class :selected. It's very similar to :checked, I couldn't find docs for :selected
In case anyone cares, I've got another solution. I just looked at the arguments from the docs. You can do something like this (Assuming you've set the value tag of the option element.:
$('#type_dropdown')
.on('changed.bs.select',
function(e, clickedIndex, newValue, oldValue) {
alert(e.target.value);
});
});
See https://silviomoreto.github.io/bootstrap-select/options/

Categories