I have an html listbox :
<select id="test" size="5">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
I am trying to select an item via code and have the listbox automatically scroll to the selected item.
Is this supposed to scroll the listbox automatically to the selected item ?
$('#test option[value="8"]').attr('selected', 'selected');
I can't seem to get it to do that ... am I missing something ?
Setting the selected item will only cause the item to be visible within the select field, but doesn't guarantee that it will be at the top of the list of items shown. I tried this in a jsfiddle and you'll see your code highlights the #8, but it's at the bottom of the select field box. http://jsfiddle.net/Ck4m3/
Related
I have a list of car that can be selected from dropdown as
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
this code gives me code of dropdown, I need a hover message as "select your car" on hovering on the box. There is a option of select that gives message for each option, however my need is to display tooltip only when hovering the select box.
The easiest way is to add a title attribute:
<select title="Select your car">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
It doesn't look that great though. If you want a fancier tooltip you'd have to go the JavaScript route.
I have a dropdown list. When user click on the drop down list, I need to show first 4 items in the list and the scroll bar so that users can scroll and see the remaining items in the list.
Please find the dropdown list sample fiddle below. The same way as shown in fiddle when user click on the dropdown list, Option 1, Option 2, Option 3, Option 4 should be shown with the scrollbar to scroll and see remaining options in the list.
<select>
<option value="one">Option 1</option>
<option value="two">Option 2</option>
<option value="three">Option 3</option>
<option value="four">Option 4</option>
<option value="five">Option 5</option>
<option value="siz">Option 6</option>
<option value="seven">Option 7</option>
<option value="eight">Option 8</option>
</select>
---EDITED---
The above code is not working in IE.
In IE it's showing the scrollar but when i select the item from the dropdown list, an alert box is displayed with error message and i cannot select any date from the dropdown list. I tried to debug and see if any errors using developer tools, but there are no errors shown.
Internet Explorer has stopped working A problem caused the progrm to stop working correctly.Please close the program.
You can use onmousedown to dynamically expand the select list on click and onchange/onblur event handlers to go back:
<select onmousedown="if (this.options.length > 4) this.size = 4;" onchange="this.size = 0;" onblur="this.size = 0;">
<option value="one">Option 1</option>
<option value="two">Option 2</option>
<option value="three">Option 3</option>
<option value="four">Option 4</option>
<option value="five">Option 5</option>
<option value="siz">Option 6</option>
<option value="seven">Option 7</option>
<option value="eight">Option 8</option>
</select>
We have a drop down field in survey page , it contains different value as shown in screenshot, the code is working fine Chrome but in IE i am getting an unwanted space problem in the drop down , i have tried different methods to fix this issue..
HTML CODE
<select class="q_select">
<option value="" class="null"></option>
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
<option value="N"class="hide">N</option>
</select>
Kindly help me , Please find the attached screenshot for chrome and IE
Chrome
-------------------------------IE shown below----------------
I am setting a default value also in the select <option value="" class="null"></option>
Situation:
I have an option list like
<select class="database-column-name" name="caseid">
<option value="1">1</option>
<option value="2">1</option>
<option value="3">1</option>
</select>
and by default there is no option selected, but when you select an option you can't go back to selecting none again! This messes up the user experience of my page because I need the user to be able to selected no option at all.
Question:
Is there a hack to get around this?
Is as simple as this
<select class="database-column-name" name="caseid">
<option value=" ">--Select--</option>
<option value="1">1</option>
<option value="2">1</option>
<option value="3">1</option>
</select>
$("select.database-column-name option").prop("selected", false);
You could have a "clear selection" button or something fire this code.
The preceding answer is a really good choice. The only recommendation that I would add to it is to make the value for the first item a "0"(zero), which allows your post-processing code to look for a specific value to ensure "no selection". Granted, you can look for " ", but that's easy to confuse with "".
<select class="database-column-name" name="caseid">
<option value="0">--Select--</option>
<option value="1">1</option>
<option value="2">1</option>
<option value="3">1</option>
If you want to have an actual blank show, rather than a phrase like "--Select--" then simply replace the "--Select--" text with a space.
<html>
<body>
<select class="database-column-name" name="caseid">
<option value="0"> </option>
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
</select>
The "value" portion is not displayed and is present to simplify code-based analysis of the selected option. In this case, a value of "0" would mean that no option has been selected.
I'm trying to modify a select element with the 'multiple' attribute to only select/disselect the one option selected, instead of disselecting all options and selecting the one target.
Let's say we got this:
<select name="somename[]" multiple="multiple">
<option selected="selected" value="val1">Val1</option>
<option selected="selected" value="val2">Val2</option>
<option value="val3">Val3</option>
</select>
What I want to happen when you select an option is:
<select name="somename[]" multiple="multiple">
<option selected="selected" value="val1">Val1</option>
<option value="val2">Val2</option> <!-- Disselected -->
<option value="val3">Val3</option>
</select>
Instead of:
<select name="somename[]" multiple="multiple">
<option value="val1">Val1</option>
<!-- All other values are disselected except the one option selected -->
<option selected="selected" value="val2">Val2</option>
<option value="val3">Val3</option>
</select>
I hope that made sense. If not please let me know.
I've tried using jQuery and hooking a click function on the select element, hoping to intersect the selected option but that failed. Appearently the selections are made before the event is triggered.
Thanks.