This question already has answers here:
How to Set Height for the Drop Down of Select box
(9 answers)
Closed 2 years ago.
this is my current code that i used to display dropdown option.
<select id="NotificationDate" style="display: table-cell; border-radius: 0.3em; color: rgb(0, 0, 0); outline: currentcolor none medium; box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 0px; font-size: 13px; font-family: "Lucida Grande", Tahoma; width: 215px; height: 20px; border: 1px none; background: lightblue none repeat scroll 0% 0%; margin-left: 15px; margin-bottom: 5px;">
<option value="2020/02/19">2020/02/19</option>
<option value="2019/10/23">2019/10/23</option>
<option value="2019/08/14">2019/08/14</option>
<option value="2019/07/11">2019/07/11</option>
<option value="2019/06/17">2019/06/17</option>
<option value="2019/05/16">2019/05/16</option>
<option value="2019/04/11">2019/04/11</option>
<option value="2019/03/18">2019/03/18</option>
<option value="2019/02/11">2019/02/11</option>
<option value="2019/01/30">2019/01/30</option>
<option value="2018/12/20">2018/12/20</option>
<option value="2018/11/19">2018/11/19</option>
<option value="2018/10/17">2018/10/17</option>
<option value="2018/09/14">2018/09/14</option>
<option value="2018/08/14">2018/08/14</option>
<option value="2018/07/18">2018/07/18</option>
<option value="2018/06/22">2018/06/22</option>
<option value="2018/05/14">2018/05/14</option>
<option value="2018/04/11">2018/04/11</option>
<option value="2018/03/12">2018/03/12</option>
<option value="2018/02/19">2018/02/19</option>
<option value="2018/01/11">2018/01/11</option>
<option value="2017/12/13">2017/12/13</option>
<option value="2017/11/14">2017/11/14</option>
<option value="2017/10/11">2017/10/11</option>
<option value="2017/09/19">2017/09/19</option>
<option value="2017/08/14">2017/08/14</option>
<option value="2017/07/13">2017/07/13</option>
<option value="2017/06/12">2017/06/12</option>
<option value="2017/05/11">2017/05/11</option>
<option value="2017/04/13">2017/04/13</option>
<option value="2017/03/13">2017/03/13</option>
<option value="2017/02/15">2017/02/15</option>
<option value="2017/01/11">2017/01/11</option>
<option value="2016/12/14">2016/12/14</option>
<option value="2016/11/11">2016/11/11</option>
<option value="2016/10/11">2016/10/11</option>
<option value="2016/09/13">2016/09/13</option>
<option value="2016/08/11">2016/08/11</option>
<option value="2016/07/11">2016/07/11</option>
<option value="2016/06/13">2016/06/13</option>
<option value="2016/04/11">2016/04/11</option>
<option value="2016/03/11">2016/03/11</option>
<option value="2016/02/11">2016/02/11</option>
<option value="2016/01/11">2016/01/11</option>
<option value="2015/12/17">2015/12/17</option>
<option value="2015/11/11">2015/11/11</option>
<option value="2015/10/12">2015/10/12</option>
<option value="2015/09/11">2015/09/11</option>
<option value="2015/08/11">2015/08/11</option>
<option value="2015/07/14">2015/07/14</option>
<option value="2015/06/11">2015/06/11</option>
<option value="2015/05/13">2015/05/13</option>
<option value="2015/04/13">2015/04/13</option>
<option value="2015/03/11">2015/03/11</option>
<option value="2015/02/11">2015/02/11</option>
<option value="2015/01/12">2015/01/12</option>
<option value="2014/12/16">2014/12/16</option>
<option value="2014/12/11">2014/12/11</option>
<option value="2014/11/11">2014/11/11</option>
<option value="2014/10/14">2014/10/14</option>
<option value="2014/09/18">2014/09/18</option>
<option value="2014/09/15">2014/09/15</option>
<option value="2014/08/13">2014/08/13</option>
<option value="2014/07/15">2014/07/15</option>
</select>
you can see in the image,the list is going too long.i want it should display only 10 and remaining should be like scroll and select.
[
Try this
<div class="container">
<select onfocus='this.size=10;'
onblur='this.size=1;'
onchange='this.size=1; this.blur();'>
<option value="">1 abc</option>
<option value="">2 abc</option>
<option value="">3 abc</option>
<option value="">4 abc</option>
<option value="">5 abc</option>
<option value="">6 abc</option>
<option value="">7 abc</option>
<option value="">8 abc</option>
<option value="">9 abc</option>
<option value="">10 abc</option>
<option value="">11 abc</option>
<option value="">12 abc</option>
<option value="">13 abc</option>
<option value="">14 abc</option>
<option value="">15 abc</option>
<option value="">16 abc</option>
<option value="">17 abc</option>
<option value="">18 abc</option>
<option value="">19 abc</option>
<option value="">20 abc</option>
</select>
</div>
Referring to this answer:
<select onfocus='this.size=10;' onblur='this.size=1;'
onchange='this.blur();'>
<option>option a</option>
<option>option b</option>
<option>option c</option>
<option>option d</option>
<option>option e</option>
<option>option f</option>
<option>option g</option>
<option>option h</option>
<option>option i</option>
<option>option j</option>
<option>option k</option>
<option>option l</option>
<option>option m</option>
<option>option n</option>
<option>option o</option>
<option>option p</option>
<option>option q</option>
<option>option r</option>
</select>
push the date variables in an array, iterate through them in a for loop and in the body of the for loop, set the scroll box elements to the last ten of the array from getting size minus 9.
Try this. It works for me
<select name="select1" onmousedown="if(this.options.length>8){this.size=8;}" onchange='this.size=0;' onblur="this.size=0;">
<option value="1">This is select number 1</option>
<option value="2">This is select number 2</option>
<option value="3">This is select number 3</option>
<option value="4">This is select number 4</option>
<option value="5">This is select number 5</option>
<option value="6">This is select number 6</option>
<option value="7">This is select number 7</option>
<option value="8">This is select number 8</option>
<option value="9">This is select number 9</option>
<option value="10">This is select number 10</option>
<option value="11">This is select number 11</option>
<option value="12">This is select number 12</option>
</select>
Related
Once I select the values determined in the select, the first select corresponds to a positive number, and the rest of select corresponds to a negative number, which will be accumulated depending on the ones that are added.
The problem comes when I select the selects, since the first input should be added/subtracted with the second input, giving rise to the third input that would be the result of these two, but it doesn't work, only when I put the numbers in the inputs manually, and not through select.
What could I do?
$('.pp').on('change', function() {
var value =this.value;
if(value == 'Gran Casa con Supremacía')
{
$('.puntosdepoblacion').val('11');
$('.arcas').val('3 Arcas de Oro');
}
if(value == 'Gran Casa')
{
$('.puntosdepoblacion').val('9');
$('.arcas').val('5 Arcas de Oro');
}
if(value == 'Casa Vasalla')
{
$('.puntosdepoblacion').val('7');
$('.arcas').val('7 Arcas de Oro');
}
});
$(document).ready(function() {
$(".a2, .b2").on("keydown keyup", function(event) {
var tr = $(this).closest("tr"); //we will use this to restrict scope to the current table row
tr.find(".c2").val(Number(tr.find(".a2").val()) + Number(tr.find(".b2").val()));
});
});
$('.select').on("change", function(){
var total=0;
$('.select').each(function(){
var price = parseFloat($(this).find("option:selected").data("price"));
console.log( price );
total += price;
});
$("#opt_price").val(total.toFixed(0))
});
$('.amt').keyup(function() {
var importe_total = 0
$(".amt").each(
function(index, value) {
if ( $.isNumeric( $(this).val() ) ){
importe_total = importe_total + eval($(this).val());
//console.log(importe_total);
}
}
);
$("#inputTotal").val(importe_total);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table><select name="titulos" class="pp"><option hidden value="" disabled selected>Títulos</option><option label="Gran Casa con Supremacía">Gran Casa con Supremacía</option>
<option label="Gran Casa">Gran Casa</option>
<option label="Casa Vasalla">Casa Vasalla</option></select><select class="select" name="poblacion">
<option disabled selected data-price="0">Población</option>
<option data-price="0">Nivel 0</option><option data-price="-1">Nivel 1</option>
<option data-price="-2">Nivel 2</option>
<option data-price="-3">Nivel 3</option>
<option data-price="-4">Nivel 4</option>
<option data-price="-5">Nivel 5</option>
<option data-price="-6">Nivel 6</option>
<option data-price="-7">Nivel 7</option>
<option data-price="-8">Nivel 8</option>
<option data-price="-9">Nivel 9</option></select>
<select class="select" name="recursos">
<option disabled selected data-price="0">Recursos</option>
<option data-price="0">Nivel 0</option>
<option data-price="-1">Nivel 1</option>
<option data-price="-2">Nivel 2</option>
<option data-price="-3">Nivel 3</option>
<option data-price="-4">Nivel 4</option>
<option data-price="-5">Nivel 5</option>
<option data-price="-6">Nivel 6</option>
<option data-price="-7">Nivel 7</option>
<option data-price="-8">Nivel 8</option>
<option data-price="-9">Nivel 9</option></select>
<select class="select" name="milicia">
<option disabled selected data-price="0">Milicia</option>
<option data-price="0">Nivel 0</option>
<option data-price="-1">Nivel 1</option>
<option data-price="-2">Nivel 2</option>
<option data-price="-3">Nivel 3</option>
<option data-price="-4">Nivel 4</option>
<option data-price="-5">Nivel 5</option>
<option data-price="-6">Nivel 6</option>
<option data-price="-7">Nivel 7</option>
<option data-price="-8">Nivel 8</option>
<option data-price="-9">Nivel 9</option></select><select class="select" name="influencia">
<option disabled selected data-price="0">Influencia</option>
<option data-price="0">Nivel 0</option>
<option data-price="-1">Nivel 1</option>
<option data-price="-2">Nivel 2</option>
<option data-price="-3">Nivel 3</option>
<option data-price="-4">Nivel 4</option>
<option data-price="-5">Nivel 5</option>
<option data-price="-6">Nivel 6</option>
<option data-price="-7">Nivel 7</option>
<option data-price="-8">Nivel 8</option>
<option data-price="-9">Nivel 9</option></select><select class="select" name="ley">
<option disabled selected data-price="0">Ley</option>
<option data-price="0">Nivel 0</option>
<option data-price="-1">Nivel 1</option>
<option data-price="-2">Nivel 2</option>
<option data-price="-3">Nivel 3</option>
<option data-price="-4">Nivel 4</option>
<option data-price="-5">Nivel 5</option>
<option data-price="-6">Nivel 6</option>
<option data-price="-7">Nivel 7</option>
<option data-price="-8">Nivel 8</option>
<option data-price="-9">Nivel 9</option></select>
<div class="puntosrasgos"><div class="col-six" style="
height: 40px;
line-height: 40px;
"><div class="titulopuntosrasgos">Puntos de Población [PP]</div></div><div class="col-four"><div class="input-group" style="
position: absolute;
margin-top: -23px;
margin-left: 145px;
">
<table style="">
<tbody><tr>
<td width="10" rowspan="1" style="
table-layout: fixed;
min-width: 35px;
"><div class="col-pp"><input class="solo-numero amt puntosdepoblacion" type="number" id="form-field-first" value="0" name="positivos"></div></td>
<td width="10" rowspan="1"><div class="col-pp"><input class="solo-numero amt" value="0" type="number" id="opt_price" name="negativos"></div>
</td>
<td colspan="3" height="10"><div class="solo-numero amt"><input id="inputTotal" class="solo-numero" value="0" type="number" disabled name="total"></div>
</td>
</tr>
</tbody></table></div></div></div>
You have to manually trigger an event when you change the input values.
First, make them respond to the change event:
$(".a2, .b2").on("keydown keyup change", function(event) {
// Code ommited
})
Then, whenever you update the value, trigger the event:
In the .pp handler, after the if blocks:
$('.puntosdepoblacion').change();
And
$("#opt_price").val(total.toFixed(0)).change();
Full code:
$(document).ready(function() {
$('.pp').on('change', function() {
var value = this.value;
if (value == 'Gran Casa con Supremacía') {
$('.puntosdepoblacion').val('11');
$('.arcas').val('3 Arcas de Oro');
}
if (value == 'Gran Casa') {
$('.puntosdepoblacion').val('9');
$('.arcas').val('5 Arcas de Oro');
}
if (value == 'Casa Vasalla') {
$('.puntosdepoblacion').val('7');
$('.arcas').val('7 Arcas de Oro');
}
// Trigger the change event in .pp to force calculation <---
$('.puntosdepoblacion').change();
});
$('.select').on("change", function() {
var total = 0;
$('.select').each(function() {
var price = parseFloat($(this).find("option:selected").data("price"));
console.log(price);
total += price;
});
$("#opt_price").val(total.toFixed(0))
.change(); // Trigger
});
$(".a2, .b2").on("keydown keyup change", function(event) { // <--- Respond to change event, too
var tr = $(this).closest("tr"); //we will use this to restrict scope to the current table row
tr.find(".c2").val(Number(tr.find(".a2").val()) + Number(tr.find(".b2").val()));
});
});
<script src="
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select name="titulos" class="pp">
<option hidden value="" disabled selected>Títulos</option>
<option label="Gran Casa con Supremacía">Gran Casa con Supremacía</option>
<option label="Gran Casa">Gran Casa</option>
<option label="Casa Vasalla">Casa Vasalla</option>
</select>
<select class="select" name="poblacion">
<option disabled selected data-price="0">Población</option>
<option data-price="0">Nivel 0</option>
<option data-price="-1">Nivel 1</option>
<option data-price="-2">Nivel 2</option>
<option data-price="-3">Nivel 3</option>
<option data-price="-4">Nivel 4</option>
<option data-price="-5">Nivel 5</option>
<option data-price="-6">Nivel 6</option>
<option data-price="-7">Nivel 7</option>
<option data-price="-8">Nivel 8</option>
<option data-price="-9">Nivel 9</option>
</select>
<select class="select" name="recursos">
<option disabled selected data-price="0">Recursos</option>
<option data-price="0">Nivel 0</option>
<option data-price="-1">Nivel 1</option>
<option data-price="-2">Nivel 2</option>
<option data-price="-3">Nivel 3</option>
<option data-price="-4">Nivel 4</option>
<option data-price="-5">Nivel 5</option>
<option data-price="-6">Nivel 6</option>
<option data-price="-7">Nivel 7</option>
<option data-price="-8">Nivel 8</option>
<option data-price="-9">Nivel 9</option>
</select>
<select class="select" name="milicia">
<option disabled selected data-price="0">Milicia</option>
<option data-price="0">Nivel 0</option>
<option data-price="-1">Nivel 1</option>
<option data-price="-2">Nivel 2</option>
<option data-price="-3">Nivel 3</option>
<option data-price="-4">Nivel 4</option>
<option data-price="-5">Nivel 5</option>
<option data-price="-6">Nivel 6</option>
<option data-price="-7">Nivel 7</option>
<option data-price="-8">Nivel 8</option>
<option data-price="-9">Nivel 9</option>
</select>
<select class="select" name="influencia">
<option disabled selected data-price="0">Influencia</option>
<option data-price="0">Nivel 0</option>
<option data-price="-1">Nivel 1</option>
<option data-price="-2">Nivel 2</option>
<option data-price="-3">Nivel 3</option>
<option data-price="-4">Nivel 4</option>
<option data-price="-5">Nivel 5</option>
<option data-price="-6">Nivel 6</option>
<option data-price="-7">Nivel 7</option>
<option data-price="-8">Nivel 8</option>
<option data-price="-9">Nivel 9</option>
</select>
<select class="select" name="ley">
<option disabled selected data-price="0">Ley</option>
<option data-price="0">Nivel 0</option>
<option data-price="-1">Nivel 1</option>
<option data-price="-2">Nivel 2</option>
<option data-price="-3">Nivel 3</option>
<option data-price="-4">Nivel 4</option>
<option data-price="-5">Nivel 5</option>
<option data-price="-6">Nivel 6</option>
<option data-price="-7">Nivel 7</option>
<option data-price="-8">Nivel 8</option>
<option data-price="-9">Nivel 9</option>
</select>
<div class="puntosrasgos">
<div class="col-six" style="height: 40px; line-height: 40px;">
<div class="titulopuntosrasgos">Puntos de Población [PP]</div>
</div>
<div class="col-four">
<div class="input-group" style="position: absolute; margin-top: -23px; margin-left: 145px;">
<table style="">
<tbody>
<tr>
<td width="10" rowspan="1" style="table-layout: fixed; min-width: 35px;">
<div class="col-pp">
<input class="col-xs-4 a2 puntosdepoblacion" type="number" disabled id="form-field-first" value="0" name="positivos">
</div>
</td>
<td width="10" rowspan="1">
<div class="col-pp">
<input class="col-xs-4 b2" value="0" type="number" disabled id="opt_price" placeholder="0" name="negativos">
</div>
</td>
<td colspan="3" height="10">
<div class="col-pp">
<input class="col-xs-4 c2" value="0" type="number" disabled id="form-field-first" placeholder="0" name="total">
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Unfortunately the limited height <select> dropdown crashing when clicked in dropdown in Internet Explorer 11 (IE11) which use onmousedown, onchange and onblur
<select name="select1" onmousedown="if(this.options.length>8){this.size=8;}" onchange="this.size=0;" onblur="this.size=0;">
Demo: https://codepen.io/anon/pen/LBveJp
<select name="select1" onmousedown="if(this.options.length>8){this.size=8;}" onchange="this.size=0;" onblur="this.size=0;">
<option value="">0001</option>
<option value="">0002</option>
<option value="">0003</option>
<option value="">0004</option>
<option value="">0005</option>
<option value="">0006</option>
<option value="">0007</option>
<option value="">0008</option>
<option value="">0009</option>
<option value="">0010</option>
<option value="">0011</option>
<option value="">0012</option>
<option value="">0013</option>
<option value="">0014</option>
<option value="">0015</option>
<option value="">0016</option>
<option value="">0017</option>
<option value="">0018</option>
<option value="">0019</option>
<option value="">0020</option>
<option value="">0021</option>
<option value="">0022</option>
<option value="">0023</option>
<option value="">0024</option>
<option value="">0025</option>
<option value="">0026</option>
<option value="">0027</option>
<option value="">0028</option>
<option value="">0029</option>
<option value="">0030</option>
<option value="">0031</option>
<option value="">0032</option>
<option value="">0033</option>
<option value="">0034</option>
<option value="">0035</option>
<option value="">0036</option>
<option value="">0037</option>
<option value="">0038</option>
<option value="">0039</option>
<option value="">0040</option>
<option value="">0041</option>
<option value="">0042</option>
<option value="">0043</option>
<option value="">0044</option>
<option value="">0045</option>
<option value="">0046</option>
<option value="">0047</option>
<option value="">0048</option>
<option value="">0049</option>
<option value="">0050</option>
<option value="">0051</option>
<option value="">0052</option>
<option value="">0053</option>
<option value="">0054</option>
<option value="">0055</option>
<option value="">0056</option>
<option value="">0057</option>
<option value="">0058</option>
<option value="">0059</option>
<option value="">0060</option>
<option value="">0061</option>
<option value="">0062</option>
<option value="">0063</option>
<option value="">0064</option>
<option value="">0065</option>
<option value="">0066</option>
<option value="">0067</option>
<option value="">0068</option>
<option value="">0069</option>
<option value="">0070</option>
<option value="">0071</option>
<option value="">0072</option>
<option value="">0073</option>
<option value="">0074</option>
<option value="">0075</option>
<option value="">0076</option>
<option value="">0077</option>
<option value="">0078</option>
<option value="">0079</option>
<option value="">0080</option>
<option value="">0081</option>
<option value="">0082</option>
<option value="">0083</option>
<option value="">0084</option>
<option value="">0085</option>
<option value="">0086</option>
<option value="">0087</option>
<option value="">0088</option>
<option value="">0089</option>
<option value="">0090</option>
<option value="">0091</option>
<option value="">0092</option>
<option value="">0093</option>
<option value="">0094</option>
<option value="">0095</option>
<option value="">0096</option>
<option value="">0097</option>
<option value="">0098</option>
<option value="">0099</option>
<option value="">0100</option>
<option value="">0101</option>
<option value="">0102</option>
<option value="">0103</option>
<option value="">0104</option>
<option value="">0105</option>
<option value="">0106</option>
<option value="">0107</option>
<option value="">0108</option>
<option value="">0109</option>
<option value="">0110</option>
<option value="">0111</option>
<option value="">0112</option>
<option value="">0113</option>
<option value="">0114</option>
<option value="">0115</option>
<option value="">0116</option>
<option value="">0117</option>
<option value="">0118</option>
<option value="">0119</option>
<option value="">0120</option>
<option value="">0121</option>
<option value="">0122</option>
<option value="">0123</option>
<option value="">0124</option>
<option value="">0125</option>
<option value="">0126</option>
<option value="">0127</option>
<option value="">0128</option>
<option value="">0129</option>
<option value="">0130</option>
<option value="">0131</option>
<option value="">0132</option>
<option value="">0133</option>
<option value="">0134</option>
<option value="">0135</option>
<option value="">0136</option>
<option value="">0137</option>
<option value="">0138</option>
<option value="">0139</option>
<option value="">0140</option>
<option value="">0141</option>
<option value="">0142</option>
<option value="">0143</option>
<option value="">0144</option>
<option value="">0145</option>
<option value="">0146</option>
<option value="">0147</option>
<option value="">0148</option>
<option value="">0149</option>
<option value="">0150</option>
</select>
Make your listeners passive.
I'm not so sure but try to attach those listeners using Javascript, instead of doing it directly in HTML and then make those listeners passive. That might fix your issue. Read more about passive event listening here.
sry for my english. but i hope you can understand what my problem is.
i have a dropdown-menu where i have all letters from A to Z. in a list, i have a lot of names. when i select a letter in the dropdown menu, it should select the same letter in the list. that works so far, but how can i move the selected letter to the top of the list?
<div align="center"><html>
<head>
<script language="JavaScript">
function Eingabe(Wert)
{
for(i = 0; i < document.getElementById('Names').options.length; i++)
{
if(Wert.substr(0, Wert.length).toLowerCase() == document.getElementById('Names').options[i].value.substr(0, Wert.length).toLowerCase() && Wert.length != 0)
{
document.getElementById('Names').options[i].selected = true;
break;
}
}
}
</script>
</head>
<body>
<label>Select letter:
<select name="Letters"onClick="Eingabe(this.value);" type="text"><br>
<option>---Select letter---</option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
...
</select>
</label>
<br>
<br>
<select id="Names" size="18">
<option value="A:">A:</option>
<option value="Adena"> -Adena</option>
<option value="Adeodata"> -Adeodata</option>
<option value="Adeodato"> -Adeodato</option>
<option value="Adeodatus"> -Adeodatus</option>
<option value="Aderito"> -Aderito</option>
<option value="Adhelm"> -Adhelm</option>
<option value="Adil"> -Adil</option>
<option value="Adina"> -Adina</option>
<option value="Adine"> -Adine</option>
<option value="Adis"> -Adis</option>
<option value="Adlai"> -Adlai</option>
<option value="Admir"> -Admir</option>
<option value="Adnan"> -Adnan</option>
<option value="Adolar"> -Adolar</option>
<option value="Adolf"> -Adolf</option>
<option value="Adolfa"> -Adolfa</option>
<option value="Adolfine"> -Adolfine</option>
<option value="Adolfo"> -Adolfo</option>
<option value="Adolph"> -Adolph</option>
<option value="Adolpha"> -Adolpha</option>
<option value="Adolphe"> -Adolphe</option>
<option value="Adolphus"> -Adolphus</option>
<option value="Adone"> -Adone</option>
<option value="Adonia"> -Adonia</option>
<option value="Adonis"> -Adonis</option>
<option value="Adora"> -Adora</option>
<option value="Adoración"> -Adoración</option>
<option value="Adria"> -Adria</option>
<option value="Adriaan"> -Adriaan</option>
<option value="Adriaen"> -Adriaen</option>
<option value="Adrián"> -Adrián</option>
<option value="Adriana"> -Adriana</option>
<option value="Adriane"> -Adriane</option>
<option value="Adrianna"> -Adrianna</option>
<option value="Adrianne"> -Adrianne</option>
<option value="Adriano"> -Adriano</option>
<option value="B:">B:</option>
<option value="Bartel"> -Bartel</option>
<option value="Barthold"> -Barthold</option>
<option value="Bartholomäa"> -Bartholomäa</option>
<option value="Bartholomaios"> -Bartholomaios</option>
<option value="Bartholomäus"> -Bartholomäus</option>
<option value="Bartholomew"> -Bartholomew</option>
<option value="Bartolmai"> -Bartolmai</option>
<option value="Bartolo"> -Bartolo</option>
<option value="Bartolomé"> -Bartolomé</option>
<option value="Bartolomea"> -Bartolomea</option>
<option value="Bartolomeo"> -Bartolomeo</option>
<option value="Bartosz"> -Bartosz</option>
<option value="Bas"> -Bas</option>
<option value="Bashkim"> -Bashkim</option>
<option value="Basia"> -Basia</option>
<option value="Basil"> -Basil</option>
<option value="Basile"> -Basile</option>
<option value="Basileios"> -Basileios</option>
<option value="Basilia"> -Basilia</option>
<option value="Basilisa"> -Basilisa</option>
<option value="Basilius"> -Basilius</option>
<option value="Basti"> -Basti</option>
<option value="Bastiaan"> -Bastiaan</option>
<option value="Bastian"> -Bastian</option>
<option value="Bastiano"> -Bastiano</option>
<option value="Bastien"> -Bastien</option>
<option value="Bathia"> -Bathia</option>
</select>
</body>
</html>
</div>
Use Element#scrollIntoView. Add the below line just before the break statement in your function Eingabe.
document.getElementById('Names').options[i].scrollIntoView();
EDIT: Also change onClick to onchange. Refer working snippet added below.
function Eingabe(Wert)
{
for(i = 0; i < document.getElementById('Names').options.length; i++)
{
if(Wert.substr(0, Wert.length).toLowerCase() == document.getElementById('Names').options[i].value.substr(0, Wert.length).toLowerCase() && Wert.length != 0)
{
document.getElementById('Names').options[i].selected = true;
document.getElementById('Names').options[i].scrollIntoView();
break;
}
}
}
<label>Select letter:
<select name="Letters" onchange="Eingabe(this.value);" type="text"><br>
<option>---Select letter---</option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
</label>
<br>
<br>
<select id="Names" size="18">
<option value="A:">A:</option>
<option value="Adena"> -Adena</option>
<option value="Adeodata"> -Adeodata</option>
<option value="Adeodato"> -Adeodato</option>
<option value="Adeodatus"> -Adeodatus</option>
<option value="Aderito"> -Aderito</option>
<option value="Adhelm"> -Adhelm</option>
<option value="Adil"> -Adil</option>
<option value="Adina"> -Adina</option>
<option value="Adine"> -Adine</option>
<option value="Adis"> -Adis</option>
<option value="Adlai"> -Adlai</option>
<option value="Admir"> -Admir</option>
<option value="Adnan"> -Adnan</option>
<option value="Adolar"> -Adolar</option>
<option value="Adolf"> -Adolf</option>
<option value="Adolfa"> -Adolfa</option>
<option value="Adolfine"> -Adolfine</option>
<option value="Adolfo"> -Adolfo</option>
<option value="Adolph"> -Adolph</option>
<option value="Adolpha"> -Adolpha</option>
<option value="Adolphe"> -Adolphe</option>
<option value="Adolphus"> -Adolphus</option>
<option value="Adone"> -Adone</option>
<option value="Adonia"> -Adonia</option>
<option value="Adonis"> -Adonis</option>
<option value="Adora"> -Adora</option>
<option value="Adoración"> -Adoración</option>
<option value="Adria"> -Adria</option>
<option value="Adriaan"> -Adriaan</option>
<option value="Adriaen"> -Adriaen</option>
<option value="Adrián"> -Adrián</option>
<option value="Adriana"> -Adriana</option>
<option value="Adriane"> -Adriane</option>
<option value="Adrianna"> -Adrianna</option>
<option value="Adrianne"> -Adrianne</option>
<option value="Adriano"> -Adriano</option>
<option value="B:">B:</option>
<option value="Bartel"> -Bartel</option>
<option value="Barthold"> -Barthold</option>
<option value="Bartholomäa"> -Bartholomäa</option>
<option value="Bartholomaios"> -Bartholomaios</option>
<option value="Bartholomäus"> -Bartholomäus</option>
<option value="Bartholomew"> -Bartholomew</option>
<option value="Bartolmai"> -Bartolmai</option>
<option value="Bartolo"> -Bartolo</option>
<option value="Bartolomé"> -Bartolomé</option>
<option value="Bartolomea"> -Bartolomea</option>
<option value="Bartolomeo"> -Bartolomeo</option>
<option value="Bartosz"> -Bartosz</option>
<option value="Bas"> -Bas</option>
<option value="Bashkim"> -Bashkim</option>
<option value="Basia"> -Basia</option>
<option value="Basil"> -Basil</option>
<option value="Basile"> -Basile</option>
<option value="Basileios"> -Basileios</option>
<option value="Basilia"> -Basilia</option>
<option value="Basilisa"> -Basilisa</option>
<option value="Basilius"> -Basilius</option>
<option value="Basti"> -Basti</option>
<option value="Bastiaan"> -Bastiaan</option>
<option value="Bastian"> -Bastian</option>
<option value="Bastiano"> -Bastiano</option>
<option value="Bastien"> -Bastien</option>
<option value="Bathia"> -Bathia</option>
</select>
I have listing week days on my web page and every day have a select box as like below
<select name="day1" >
<option value="">select</option>
<option value="1">Text 1</option>
<option value="2">Text 2</option>
<option value="3">Text 3</option>
</select>
<select name="day2" >
<option value="">select</option>
<option value="1">Text 1</option>
<option value="2">Text 2</option>
<option value="3">Text 3</option>
</select>
<select name="day3" >
<option value="">select</option>
<option value="1">Text 1</option>
<option value="2">Text 2</option>
<option value="3">Text 3</option>
</select>
.
.
.
.
Here if i select any option from "day2" then how can i make all others select box value default or null, as well as if i select with "day1" then day2 and day3 should be default or null using jQuery
Just create a change listener on all select and change every element what is not() itself.
$("select").change(function() {
$("select").not(this).val("");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="day1">
<option value="">select</option>
<option value="1">Text 1</option>
<option value="2">Text 2</option>
<option value="3">Text 3</option>
</select>
<select name="day2">
<option value="">select</option>
<option value="1">Text 1</option>
<option value="2">Text 2</option>
<option value="3">Text 3</option>
</select>
<select name="day3">
<option value="">select</option>
<option value="1">Text 1</option>
<option value="2">Text 2</option>
<option value="3">Text 3</option>
</select>
As you see in the snippet below , there are many options .
When I click the select tagment , a long list will appear before it become the size of 5 . You can try it . I don't want the wrong effect of it .
I tried mousedown event to prevent it but failed . How to controll it ?
$("#select").click(function(event){
event.preventDefault();
event.stopPropagation();
if ( !$(this).hasClass("size") ) {
$(this).attr("size","5");
$(this).addClass("size");
} else {
$(this).attr("size","1");
$(this).removeClass("size");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<select name="test" id="select">
asdfasdf
<option value="">option1</option>
<option value="">option2</option>
<option value="">option3</option>
<option value="">option4</option>
<option value="">option5</option>
<option value="">option6</option>
<option value="">option7</option>
<option value="">option8</option>
<option value="">option9</option>
<option value="">option8</option>
<option value="">option7</option>
<option value="">option6</option>
<option value="">option5</option>
<option value="">option4</option>
<option value="">option3</option>
<option value="">option2</option>
<option value="">option1</option>
<option value="">option2</option>
<option value="">option3</option>
<option value="">option4</option>
<option value="">option5</option>
<option value="">option6</option>
<option value="">option7</option>
<option value="">option8</option>
<option value="">option9</option>
<option value="">option0</option>
<option value="">option9</option>
<option value="">option8</option>
<option value="">option7</option>
<option value="">option6</option>
</select>
</div>
It can't become the size of one when blur.
try this
$("#select").one("click",function(){
if (!$("#select").hasClass("size")) {
$("#select").attr("size", "5");
$("#select").addClass("size");
} else {
$("#select").attr("size", "1");
$("#select").removeClass("size");
}
});
Saw this on another post the other day it had a good link to a working fiddle using jquery.
<select name="select1" onmousedown="if(this.options.length>8){this.size=2;}" onchange='this.size=0;' onblur="this.size=0;">
http://jsfiddle.net/aTzc2/
You can just set the this.size= to whatever you want.
<div id="myselect-container">
<select name="select1" onmousedown="if(this.options.length>5){this.size=5;}" onchange='this.size=0;' onblur="this.size=5;">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
<option value="5">option 5</option>
<option value="6">option 6</option>
<option value="7">option 7</option>
<option value="8">option 8</option>
<option value="9">option 9</option>
<option value="10">option 10</option>
<option value="11">option 11</option>
<option value="12">option 12</option>
</select>
</div>
css:
#myselect-container {
position:relative;
height:9px;
width:100px;
/*for contain our absoulte select tag */
}
#myselect-container select {
position:absolute;
/*for put our list on other tag */
}
$(function(){
$("#test").click(function(event){
event.preventDefault();
event.stopPropagation();
$(this).focus();
if ( $("option").length > 5 ) {
//选项超过五个
if ( !$(this).hasClass("size") ) {
//未打开状态时 展开下拉列表
$(this).attr("size","5").addClass("size");
} else {
//已打开状态时 收回下拉列表
$(this).attr("size","1").removeClass("size").blur();
}
} else {
//选项不超过五个
if ( !$(this).hasClass("size") ) {
//未打开状态时 展开下拉列表
$(this).attr("size" , $("option").length).addClass("size");
} else {
//已打开状态时 收回下拉列表
$(this).attr("size","1").removeClass("size").blur();
}
}
}).mousedown(function(event){
event.preventDefault();
}).blur(function(){
$(this).attr("size","1").removeClass("size");
}).change(function(){
//blur之后才会触发change
console.log($("option:selected").html());
});
$("option").click(function(event){
event.preventDefault();
console.log($(this).index());
$("option").eq($(this).index()).prop("selected","selected");
});
});
#test{
font-size: 30px;
position: fixed;
left: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="test" id="test" >
asdfasdf
<option value=""></option>
<option value="">asdfasfd2</option>
<option value="">asdfasfd3</option>
<option value="">asdfasfd4</option>
<option value="">asdfasfd3</option>
<option value="">asdfasfd4</option>
<option value="">asdfasfd3</option>
<option value="">asdfasfd4</option>
<option value="">asdfasfd3</option>
<option value="">asdfasfd4</option>
<option value="">asdfasfd3</option>
<option value="">asdfasfd4</option>
<option value="">asdfasfd3</option>
<option value="">asdfasfd4</option>
<option value="">asdfasfd3</option>
<option value="">asdfasfd4</option>
<option value="">asdfasfd3</option>
<option value="">asdfasfd4</option>
<option value="">asdfasfd3</option>
<option value="">asdfasfd4</option>
<option value="">asdfasfd3</option>
<option value="">asdfasfd4</option>
</select>