I am using the bootstrap select drop down and I want to put some shadow on option list.
<select class="form-control nxreg-sign-up-country custom-form-control>
<option>Please</option>
<option value="AF">Afghanistan</option>
<option value="AX">Aland Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
You cannot style default dropdown from <select> tag, as the styling is handled by the user's OS.
Try using bootstrap select library https://developer.snapappointments.com/bootstrap-select/examples/
It will replace the default dropdown with element which you can style.
Related
i am trying to select a value from the drop down element in Node JS with 'selenium-webdriver' package and could not find any support for 'Select' options. In java we know that using Select class. But in this npm package, how can we select a value from drop down.
HTML code:
<select id="ivSearch:searchType" name="ivSearch:searchType" class="main" size="1">
<option value="0">-Select-</option>
<option value="3">value one</option>
<option value="2" selected="selected">value two</option>
<option value="96">value three</option>
<option value="87">value four</option>
<option value="4">value five</option>
<option value="1">value six</option>
</select>
i need to select a value 'value four' from the drop down list and proceed. any help please.
in java i know it is like below, likewise how can it be in NodeJS?
Select lists = new Select(element);
lists.selectByValue("value four");
I am working on an application where there are several select tags. I know how to apply tooltip on option tag but it will take a lot of time. Is there a way i can allot the tooltip allotted to select tag to be allotted to the below option tags?
<select tittle="Select Box" multiple="true">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option></select>
Apply the title to a div and add select inside that div without title.
<div tittle="Select Box">
<select multiple="true">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option></select></div>
I have this code below:
<select name='m-menu' onchange='location = this.options[this.selectedIndex].value;'>
<option selected value='/users/lol'>My Account</option>
<option value='/?signout'>Sign Out</option>
<option value='/photos'>Photos</option>
<option value='/post'>Share/Post</option>
<option value='/feed'>Feed</option>
<option value='/chat'>Create Chat</option>
</select>
However I want it to go to the account if the user clicks on "My Account". Can this be done without adding an other option the the select tag, If so please help???
I will need this to be used for mobile browsers and I need this to go to the url if and when the user selects an option
You can achieve that by changing the selected value when the user focuses on the select onfocus="this.selectedIndex = -1".
<select name='m-menu' onfocus="this.selectedIndex = 0" onchange='location = this.options[this.selectedIndex].value;'>
<option value="" style="display: none">Select an Item</option>
<option selected value='/users/lol'>My Account</option>
<option value='/?signout'>Sign Out</option>
<option value='/photos'>Photos</option>
<option value='/post'>Share/Post</option>
<option value='/feed'>Feed</option>
<option value='/chat'>Create Chat</option>
</select>
I would also suggest you add your event listeners from a separate javascript file instead of using the on* attributes.
You can do that using addEventListener
If I have the multiselect directly on the page, it works and displays fine; but if I have the multiselect on the popup, the display is wrong and it only shows one element. Can someone tell me why and how to fix it?
I show my problem in this jsfiddle: http://jsfiddle.net/uvvm40Lu/4/ (click on the popup link).
And this is my code:
<select id="transactionType0" multiple="multiple" data-native-menu="false" size="7">
<option value="Mo">Mo</option>
<option value="Di">Di</option>
<option value="Mi">Mi</option>
<option value="Do">Do</option>
<option value="Fr">Fr</option>
<option value="Sa">Sa</option>
<option value="So">So</option>
</select>
popup
<div id="popup1" data-role="popup" data-overlay-theme="a">
<select id="transactionType1" multiple="multiple" data-native-menu="false" size="7">
<option value="Mo">Mo</option>
<option value="Di">Di</option>
<option value="Mi">Mi</option>
<option value="Do">Do</option>
<option value="Fr">Fr</option>
<option value="Sa">Sa</option>
<option value="So">So</option>
</select>
If you look at the popup documentation: http://api.jquerymobile.com/1.3/popup/, you will see that it does not support popup chaining (i.e. one popup open over another popup). Unfortunately the multi-select uses a popup to display the choices, so it violates the popup chaining issue.
There is a jQM plugin called simpledialog2 that does allow chaining: http://dev.jtsage.com/jQM-SimpleDialog/demos2/, or you can roll your own.
How do you make a combobox with multiselect option? Using Javascript or HTML. allows you to select multiple options but does not provide a combo/dropdown structure.
That is not standard HTML functionality. There is either a dropdown, or a multiselect. What you can use, is a library that can handle the conversion, like http://harvesthq.github.com/chosen/.
What about this?
<select multiple>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
</select>