Is there a way to select optgroup?
It seems to be disabled all the time. I have tried searching for javascript solutions but could not find any good ones.
A simple
document.getElementById
should suffice. See the JSFiddle I cooked up for you!
var optGroup = document.getElementById('myOptGroup')
optGroup.innerHTML = "<option value='saab'>Saab</option>"
Unfortunately, there is no way to do this inside the native HTML SELECT element. There's also no way to style options inside of a SELECT element, so you can't just use options and make some of them look like optgroups.
You'll have to come up with a work around using a combination of A and UL elements. Here's a basic one using the below HTML:
<div>
Select
<ul>
<li class = "group">
<a href = "#">
Foods
</a>
</li>
<li class = "choice">
<a href = "#">
Hamburer
</a>
</li>
<li class = "choice">
<a href = "#">
Hotdog
</a>
</li>
</ul>
</div>
Fiddle here
Well you can have an example here: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_optgroup
Its just more like a tag, to tell about the options below. Or just like a caption.
If you want to select multiple ones then you might use jQuery created select. I mean a custom one, or you can use checkboxes and merge them in a list as a select tag.
There is no other way to select two options from one select element. Each select must have one and only one value.
Other way is to add the value to each option, and then seperate them using ,. But there is no option to select optgroup Its just a way to group the options under it or more like a label to them.
I am getting a warning alert that I am missing a point, do you want to click on the optgroup and select a value under it? I think this might be the condition!
Related
Hi everyone first post here and I'm working on a navigation bar and needed to add and id and value to the ul, then in an anchor tag above it, add an attribute of aria-controls = the value of the id I made for the ul.
<li class="hs-menu-item hs-menu-depth-1 hs-item-has-children" role="menu">
Rates
<a class="child-trigger"><span></span></a>
<ul class="hs-menu-children-wrapper">
So far I've added the id and added the attribute with Javascript.
document.getElementsByClassName("hs-menu-children-wrapper")[0].setAttribute("id","Rates");
document.getElementsByTagName("a")[10].setAttribute("aria-controls","Rates");
which gave me what I wanted.
Rates
<a class="child-trigger"><span></span></a>
<ul class="hs-menu-children-wrapper" id="Rates" >
but I have 5 other elements with id's that I need to apply this to and targeting the different anchor tags won't work for every page we plan to use this with. I pretty much need help simplifying this thanks in advance.
So, assuming each is contained in its own parent element, something like this could work. Of course, you'd want to give the trigger a some sort of class to identify and hook into.
/**
* First, we create a list of all the uls we want to connect.
* Note that, because some browsers don't treat a list of
* nodes as an Array, we want to convert it to an array.
* Here, I'm using the ES6 spread operator, which may not be
* the best option, but for demonstration purposes, it works.
**/
const ulEls = [...document.querySelectorAll("ul")];
/**
* Now, iterate over that array. With each ul, we want to find
* a parent element, and then within that, locate the anchor
* that will be made the control for this ul. Once we find
* that, we can assign it the attribute with the value we want.
**/
ulEls.forEach( (ulEl) => {
let container = ulEl.parentNode,
triggerEl = container.querySelector(".ul-controller");
triggerEl.setAttribute("aria-controls", ulEl.id);
} );
<div>
<a class='ul-controller' href="https://www.website.org" aria-expanded="false">Rates</a>
<a class="child-trigger"><span></span></a>
<ul class="hs-menu-children-wrapper" id="Rates" >
...
</ul>
</div>
<div>
<a class='ul-controller' href="https://www.website.org" aria-expanded="false">Sizes</a>
<a class="child-trigger"><span></span></a>
<ul class="hs-menu-children-wrapper" id="Sizes" >
...
</ul>
</div>
<div>
<a class='ul-controller' href="https://www.website.org" aria-expanded="false">Times</a>
<a class="child-trigger"><span></span></a>
<ul class="hs-menu-children-wrapper" id="Cheezburger" >
...
</ul>
</div>
If you open the console, you'll see that the aria-controls is being set on each dynamically. Basically, it iterates over each ul, and uses that as the starting point for setting its sibling a to the appropriate aria-controls using setAttribute().
EDIT: As was pointed out, querySelectorAll returns a nodeList, which not every browser will treat as an Array. So it is best practice to convert that into an array before trying to run forEach over the set.
In my web I have more than 5 links,some of them are in the same group. I want to make them hide or show together.So I give the same name to the common link.But How to operate them?
<a href='a.jsp' name='group1'>aa</a>
<a href='b.jsp' name='group2' >bb</a>
<a href='c.jsp' name='group1'>cc</a>
<a href='d.jsp' name='group2'>dd</a>
<a href='e.jsp' name='group1'>ee</a>
If use input,I can write like $("input[name='group1']").hide();.But now is link tag.How to operate them?
Classes are our friend - forget trying to use a name attribute - this is not the correct use for that. What you want to do is add a class and then alter the display based on the class:
//HTML
<a href='a.jsp' class='group1'>aa</a>
<a href='b.jsp' class='group2' >bb</a>
<a href='c.jsp' class='group1'>cc</a>
<a href='d.jsp' class='group2'>dd</a>
<a href='e.jsp' class='group1'>ee</a>
//js
$('.group1').hide();
you can also add css in the jquery
//js
$('.group1').css('display','none');
but the better way of altering the display state is to have a class that you then add or remove to the elements - that way you are not altering the actual css of the element:
//css
.hidden {display:none}
.shown{display:block}
//js
$('.group1').addClass('hidden');
you can also toggle the class - which allows you to show the elements simply by not hiding them
//js
$('.group1').toggleClass('hidden');
You can select all of the anchor tags with this the same code as you would use for input, but you just specify that you want to select the <a> tags, and then you can call the method hide().
$("a[name='group1']").hide()
The [name='name'] part of the code is called CSS attribute selector, and it can be used with most HTML tags.
See this:
https://css-tricks.com/almanac/selectors/a/attribute/
And this:
https://developer.mozilla.org/cs/docs/Web/CSS/Attribute_selectors
Although when doing something like this, it would be much better to use classes.
Working a page of buttons which populates a textarea with the value of the buttons.
This works fine for items that are buttons, but cannot get it working for list items.
I have to use a list item since some buttons have a drop down.
jsfiddle shows the list item alerting 0 even thought it does have a value.
http://jsfiddle.net/hsw32zv8/
<li class='item_value' value='value'>
<a href='#'>Click</a>
</li>
<br><br>
<button type='button' class='btn btn-success item_value' value='value2'>Click 2</button>
jQuery:
$(".item_value").on('click',function(){
alert(this.value);
});
value is not a valid attribute for the li element (unless it's in an ol, but that seems unlikely given your issues and the fact the value of the attribute you had was a string not a number), nor does the DOMElement for that tag type have a value property.
Adding non-standard attributes to your markup will render the page invalid and may lead to JS and UI problems. If you want to create a custom attribute, use data-*:
<li class="item_value" data-value="value">
Click
</li>
$('.item_value').on('click', function(){
alert($(this).data('value')); // = 'value'
});
li element doesn't have value attribute. However if you still want to get it use attr method:
$( this ).attr( 'value' );
jsFiddle
A list item <li> haves a value but it only takes numbers (note they should be in an <ol>). You gave a string (at interpreted that as 0) so for example:
<li class='item_value' value='1010'>
Click
</li>
Will show up as a value of 1010. You can get around this by adding a data- attribute instead: data-value="someStringHere"
just modified your this.value to $(this).attr('value').
so the complete code:
$(".item_value").on('click',function(){
alert($(this).attr('value'));
});
hopefully helping
I would like to know if there is an easier way to check if an element has an ancestor with a particular class.
Consider the following HTML code:
<ul id="uniqueID" class="parentClass">
<li class="subclassA">
<div class="subclassB">
<nobr>
MyText
</nobr>
</div>
</li>
<li class="subclassA"> ... </li>
<li class="subclassA"> ... </li>
<li class="subclassA"> ... </li>
</ul>
<div>other elements in this page which I want to select</div>
Right now, I can select the element MyText by using a jQuery selector checking the href for a particular format. What I can then do is do .parent() a known number of times (4) and then check the class attribute of that particular element that I've now moved to. While this is working just fine, I am curious if there is a better way to do it, perhaps one that lets me be a bit more dynamic?
PS. There are a lot of elements that I'm selecting that'll fit this $('[href *= index.php]') format, so I want to keep those but remove the ones that fall under the categorization where they are a descendant of a member of class listclass. Currently I'm just selecting all of the elements with the selector above, then using an if statement to check through and see if it fits this condition. Again, if there is a more efficient way to do this (perhaps select these certain elements in the first place?) I would love to hear about it.
Current code:
$('[href *= "index.php"]').each(function(){
if ($(this).parent().parent().parent().parent().attr('class') != 'parentClass'){
//do things
}
});
To generalise you can use
.closest(".parentClass")
You can use closest and is:
$('[href*="index.php"]').each(function(){
if ($(this).closest('ul').is('.parentClass')) {
//do things''
}
});
if($(this).parents("ul.parentClass").length == 0){
//do something
}
How I can select a specific a element id whit jquery find?Or it is even possible?
HTML:
<div id="bar">
<a id="1" href="#"></a>
<a id="2" href="#"></a>
<a id="3" href="#"></a>
<a id="4" href="#"></a>
</div>
Javascript:
$('#bar a').find('id',2).css("background-color","blue");
But dosen't work
IDs must be unique, so simply use $('#2') to select the element. There is usually no need to make an ID selector more specific and doing so would just slow it down.
Besides that, unless you are using HTML5, an ID cannot start with a number. Use e.g. whatever-2 instead of just 2
$('#bar a#1')
will select the with id '1'.
Alltho, #1 is not a valid ID-name, they can't begin with a number, I think.
Either finding a descendant
$('#bar').find('#2').css("background-color","blue");
or filtering a descendant
$('#bar a').filter('#2').css("background-color","blue");
or getting via context:
var parent = $('#bar');
$('#2',parent).css("background-color","blue");
or get it directly! since IDs are unique anyway (unless you move this element often in the page, which is why you need the parent):
$('#2').css("background-color","blue");
You can use eq method for get element by index http://api.jquery.com/eq/
$('#bar a').eq(2).css("background-color","blue");
There is no point using find() to search for id, since by definition id has to be unique. Find() function is better when you want to find a class or html tag elements inside any parent element. Good example from documentation: when you want to change css of all spans inside specific element, use find:
$("p").find("span").css('color','red');
you could try $("#bar").find("#2").css("background-color", "blue");
and as ThiefMaster says u can always use $("#id").css("background-color", "blue");