i want to use a input box from SELECT2(jQuery Plugin) and want to send it with PHP Post to the server.
How do i access these Elements (A, Adolf, B)?
Thanks
$('.select2-search-choice div');
if you want to get the text of the elements, then use $('.select2-search-choice div').text();
If you use Select2 (http://ivaynberg.github.io/select2/) it overrides <select> element.
So probably you use like this:
<select id="my-select"><option>...</option></select>
And in JS:
$("#my-select").select2();
This way - if you want to read current value just use:
$("#my-select").val();
or using Select2 API:
$("#my-select").select2("val");
If you need to get all values from <option>'s - you can do it like this:
$("#my-select option").map(function() {return $(this).val();}).get();
You can loop through $('li.seleact2-search-choice').children('div'); or simply $('.select2-search-choice div');
To get an Array of the values use the API from select2:
var data = $("#YourSelect2Element").select2("val");
You have to change the selector in the selector you used to create the select2 input.
See the docs.
Related
I am trying to add more than one attr() value when using append in a dropdown in jQuery.
This is working fine:
$('#twostages').append($('<option/>').attr("value", option.stage).text(option.stage));
And I can access the value using:
document.getElementById("twostages").value
However, when I try this code:
$('#twostages').append($('<option/>').attr({ "value": option.stage, "matone": option.matone }).text(option.stage));
I am not able to retrieve the value or matone using the document.getElementById("twostages").value or document.getElementById("twostages").matone
I got the idea of the above code from this topic: jQuery: Adding two attributes via the .attr(); method
Any help would be greatly appreciated.
Thanks.
matone is a property added on options.So you can't access it directly.
you need to check first the selected option and then get it's corresponding matone value using .attr()
Working snippet:-
$('#twostages').append($('<option/>').attr({ "value":"stage1", "matone": "mymetion" }).text("stage1"));
console.log($('#twostages').val());
console.log($('#twostages').find(':selected').attr('matone'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="twostages">
</select>
Reference:-
.attr()
:selected
Note:- Standered practice is to use data-attributes for custom attributes
If I've got a jQuery object that contains input fields like so:
var $inputs = $("#signup input");
Is there a way I can directly select one out of it where the name attribute equals a given value?
I've tried $inputs.find("name=firstName").select();, but it seems not to be working.
You need to use attribute-value selector here:
$("#signup input[name=firstName]");
update:
$inputs.filter("[name=firstname]");
Working Demo
You were close.
$inputs.filter("[name=firstName]").select();
Or, using my preferred syntax...
$inputs.filter('[name="firstName"]').select();
Demo
http://api.jquery.com/attribute-equals-selector/
Use:
$inputs.filter('[name="firstName"]');
Special Note:
.select() is used to select the text in the input but not to select the way you mean.
Try
var $inputs = $("#signup");
$("[name=firstName]", $inputs).select();
jsfiddle http://jsfiddle.net/guest271314/571ckuu0/
I want to create a simple custom tooltip plugin for jQuery that for every element that has a data-custom-tooltipset. So, something like :
Hhahaha
OR
<button data-custom-tooltip="This is my tooltip for the button Tex">Haha Button :) </button >
So, the function to display the tooltip would be triggered only if the data-custom-tooltip is NOT empty.
Close enough to this : jQuery selectors on custom data attributes using HTML5
You can use :not() selector and remove the empty ones
$('[data-custom-tooltip]:not([data-custom-tooltip=""])')
or
$('[data-custom-tooltip]').not('[data-custom-tooltip=""]')
or based on what #VisioN said in the comments with the Not Equal Selector
var xxx = $('[data-custom-tooltip][data-custom-tooltip!=""]');
use like this
$("[data-custom-tooltip]:not([data-custom-tooltip='']").click(function(){alert("clicked");});
fiddle
Try
.filter()
var tooltip_el = $('[data-custom-tooltip]').filter(function () {
return $.trim($(this).data('custom-tooltip')) != '';
});
I have a ul with several items. I populate the list dynamically after page load using jquery. As I add each list item, I also add an "itemID" to the data of that element using the jquery ".data()" function. Something like this:
var item = $('<li>My Item Name</li>');
item.data('itemID', '123ABC456');
Later, I need a selector to determine if there is any item in my item list with a specific itemID. First I tried using:
$('*[data-itemID="123ABC456"]');
This didn't work - and on further research, I discovered that this syntax only works if the data attribute was set in the DOM when the page was loaded; it doesn't work if you use the ".data" jquery method dynamically.
Next I tried:
$(':data(itemID==123ABC456)');
For some reason, this doesn't work. If I run simply $(':data(itemID)'), however, then I do get all the li elements that have an itemID in their data.
I know that the itemID attribute is set correctly, as when I call .data() on that list item I get:
Object { itemID="123ABC456"}
How can I select all elements that have an itemID of "123ABC456" in their data?
http://jsfiddle.net/w28p9/1/ <-- jsFiddle example showing differences with data-attribute & jquery.data()
jQuery.data() is different than HTML5 data-NAME attributes which you are trying to search for.
http://api.jquery.com/jQuery.data/
jQuery.data() saves inside of the jquery element (this data is hidden from plain sight).
Looking for [data-itemID] would work if inside of the actual had: <li data-itemID="12345"></li>.
To retrieve and look for the actual hidden .data() try:
// of course be more specific than just searching through all <li>'s
$('li').each(function () {
if ( $(this).data('itemID') === '123ABC456' ) {
// do whatever you wanted to do with it
}
});
Hope that helps!
Instead of
$(item).data('itemID', '123ABC456')
use
$(item).attr('data-itemID', '123ABC456')
Then you can use
$('[data-itemID=123ABC456]')
as a selector
How about putting the itemID in the DOM:
var item = $('<li itemID="'+itemid+">My Item Name</li>');
I want to get all elements from the web page.i used form id or name to get all elements but if there is no form id or name i can't get elements from that page.what is the alternate for this problem. please help.
You can retrieve an array of all nodes in a html document using document.getElementsByTagName('*'). After that you can iterate through that array:
var allElements = document.getElementsByTagName('*');
for (var i=0;i<allElements.length;i++){
//do things with the element, e.g.
//console.log(allElements[i].type)
//console.log(allElements[i].id)
//console.log(allElements[i].innerHTML)
}
Update 2014: a more modern approach would be
var allEls = [].slice.call(document.querySelectorAll('*');
allEls.forEach( function (el) {
//do things with the element, e.g.
//console.log(el.type)
//console.log(el.id)
//console.log(el.innerHTML)
});
You can use jQuery: $("html *") which will return all elements between the html tags
for names you must use $("html *").attr('name')
for values $("html *").val() or $("html *").attr('value')
Have heard of something called jQuery ? With the help of traversing API you can get to an element you want. Here is the complete list of API - http://api.jquery.com/
You can use the jQuery selectors like: $("*") .This particular selector will return all the elements(tags) of that html page.
maybe you can try this: document.childNodes
no framework, lib needed.