Using HTML, I'm attempting to create a nested dropdown menu, but with no success so far. I placed a dropdown list inside the second item in the first dropdown list, but the inner dropdown list isn't being displayed at all, as seen here:
<select id="myList">
<option></option>
<option>Item 1</option>
<option>Item 2 with a dropdown list inside it
<select id="myList">
<option></option>
<option>Item 1</option>
<option>Item 2</option>
</select>
</option>
</select>
Is it even possible to place one HTML dropdown list inside another HTML dropdown list?
This is not possible, select option cannot contain any other html tags.
Text with eventually escaped characters (like é) are only allowed inside select option.
See Reference
Probably you want to use/create some JS plugin. The below one probably might suit your need.
http://twitter.github.io/bootstrap/javascript.html#dropdowns
You can't have a nested dropdown. The standard dropdown doesn't support arbitrary html, so you have to create your own custom dropdown to achieve this.
One technique is to use a div with z-index and add expand/collapse logic to create the dropdown effect.
I found a JQuery plugin called Droppy, and it appears that it's intended to solve the problem that I've described here.
Dynamic Drive has also produced a similar script with the same purpose.
Related
I need help to show different text upon selection form dropdown without javascript
i tried below code but it also use onchange event .
<div>
<select onchange="if(selectedIndex!=0)document.getElementById('t').innerHTML=options[selectedIndex].value;">
<option value="">< select an option ></option>
<option value="term 1">term 1</option>
<option value="term 2">term 2</option>
<option value="term 3">term 3</option>
</select>
</div>
<div id="t"></div>
I need help from you to have the same functionality but without javascript.
Thanks
Unfortunately this will not be easily possible and even possible with current css 3 and HTML 5 standards.
Actually based on pseudo selectors and elements you can do the checkbox hack
The same checked tag applies and for <option> elements from <select>
So based on this selector you can for example hide the selected element from the <select> with code like in this StackOverflow comment
The main problem here is that based on this pseudo selector you can select only elements that are inside the <select> tag - this means other option tags next to the selected one.
In order to build a selector that selects the element #t from your example you will first need to go out for the options element level and select the <select> tag and look for some element after it that you can try modifying/making visible/invisible with a css. In the current selector specification you are not able to get the parent of some element. See this stackoverflow comment for any updates on that. So as of FEB 2020 you will need again to do this with JS which makes the current effort useless.
I just started learning angular 2 and making small web page.
One important requirement is to have expanded drop down list with check button.
The drop down list has to stay expanded, show 10 elements by default and support multiple selection. so I used multiple and size attribute for it. But I can't find a way to put checkbox in front of each element.
I also thought about using checkbox control instead of select option. But as there are so so many elements, I don't know how to make only 10 items visible with scroll bar.
Below is my code. Each group has array of element object. Can anyone help me please?
<div class="blahblah">
<div class="select-wrapping hide-list" >
<select class="wide" size="10" name="groups" multiple>
<optgroup *ngFor="let group of groups" label="{{group.name}}">
<option *ngFor="let element of group.elements" [value]="element.ID">
</optgroup>
</select>
</div>
</div>
I am facing an issue with a drop down select in IE11. If the drop down contains one option element it does not expand down while selecting options. The option is overlapping the select which makes it difficult to select.
Example: I have a drop down which consists of element "Ajitesh"
<select> <option> Ajitesh </option> </select>
In the above code whilst selecting "Ajitesh" the drop down is not expanding down .
You could try to contain the single option in an opt-group tag like so:
<select>
<optgroup label="">
<option value="Ajitesh">Ajitesh</option>
</optgroup>
</select>
Otherwise, you could simply add an another - or many - empty option tags like:
<select>
<option value="Ajitesh">Ajitesh</option>
<option value=""></option>
</select>
edit: Please note that this is IE11 (and others) default behaviour, that is, it has been designed to prohibit the use of a dropdown with only one option. If you do not want to add an empty element, there isn't the option of changing the default behaviour of the browser itself - it's just not possible given your circumstances.
When I add "multiple" attribute to select menu, it behaves differently & doesnt show all options in a drop down list.
How it looks:
Here's the html code:
<select name="advertLocation" multiple="multiple">
<option value="--Select--">--Select--</option>
<option style="color:#3366cb;" value="Public - No specific target"><b>Public - No specific target</b></option>
<option>Afghanistan</option>
<option>Albania</option>
......
</select>
When adding multiple="multiple" and since you cannot select multiple values in a drop-down list, the browser renders the element as a scrolled list box.
There is nothing you can do to change this behaviour.
I have been looking around for a couple days now and haven't found the answer. I did see this: jQuery - Copy / move text from select list to textarea which I already did, but then the problem is what if the after copying the selected drop down item to go into the text area you change your mind and want to send it back or get rid of it?
I'm not sure if it's best to use two tags or if I should use textareas. This is what I have for the field on the left:
<select size="10" name="options" variable="#available options" multiple="multiple">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
And then when options are selected and the button is clicked they are added to a list and my textarea on the right reflects that list. Should I also make the area on the right a selectable drop down similar to the one with all my options? If I do that, then how to I get it to reflect only the options I have clicked?
Sorry if this doesn't make sense. It's my first time posting here and I'm not a programmer (but learning). Thanks in advance!