Problem in automatic addition of Inputs by selecting the values in Select - javascript

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>

Related

Dependent dropdown-list

I am trying to make depending dropdown list. Second list depends on the first one, but when I coded and used it, it shows all of the answers, like "depending" didn't even work. Like this :
$(function() {
var $cat = $("#category1"),
$subcat = $("#category2");
$cat.on("change", function() {
var _rel = $(this).val();
$subcat.find("option").attr("style", "");
$subcat.val("");
if (!_rel) return $subcat.prop("disabled", true);
$subcat.find("[rel=" + _rel + "]").show();
$subcat.prop("disabled", false);
});
});
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<form>
<div class="form-history">
<span>
<div class="form-label"><label for="employeeID">WPROWADŹ ID TAG</label></div>
<div class="form-smallmessage"><input type="text" name="employeeID" id="employee_input"></div>
</span>
<span>
<div class="form-label"><label for="DzialID">Wybierz dział</label></div>
<div class="form-smallmessage">
<select name="category1" id="category1">
<option value="">Wybierz Dział</option>
<option value="Making_TP">Making Toothpaste</option>
<option value="Making_MW">Making MouthWash</option>
<option value="Finishing_HSL">Finishing HSL</option>
<option value="Finishing_LSL">Finishing LSL</option>
<option value="Finishing_MW">Finishing MouthWash</option>
<option value="VI_TUBES">VI Tubes</option>
<option value="VI_PRINTING">VI Printing</option>
</select>
</div>
</span>
<div class="form-label"><label for="LineID">Wybierz linie</label></div>
<div class="form-smallmessage">
<select disabled="disabled" id="category2" name="category2">
<option value>Wybierz linie</option>
<!-- Making_TP -->
<option rel="Making_TP" value="Lee1">Lee 1</option>
<option rel="Making_TP" value="Lee2">Lee 2</option>
<option rel="Making_TP" value="Lee3">Lee 3</option>
<option rel="Making_TP" value="Lee4">Lee 4</option>
<option rel="Making_TP" value="Lee5">Lee 5</option>
<option rel="Making_TP" value="Lee6">Lee 6</option>
<option rel="Making_TP" value="lee7">Lee 7</option>
<option rel="Making_TP" value="ZOATEC">Zoatec</option>
<option rel="Making_TP" value="Lee9">Lee 9</option>
<!-- Making_MW -->
<option rel="Making_MW" value="MW1">Making MW 1</option>
<option rel="Making_MW" value="MW2">Making MW 2</option>
<!-- Finishing_HSL -->
<option rel="Finishing_HSL" value="HSL1">High Speed Line 1</option>
<option rel="Finishing_HSL" value="HSL2">High Speed Line 2</option>
<option rel="Finishing_HSL" value="HSL3">High Speed Line 3</option>
<option rel="Finishing_HSL" value="HSL4">High Speed Line 4</option>
<option rel="Finishing_HSL" value="HSL5">High Speed Line 5</option>
<option rel="Finishing_HSL" value="HSL6">High Speed Line 6</option>
<option rel="Finishing_HSL" value="HSL7">High Speed Line 7</option>
<!-- Finishing_LSL -->
<option rel="Finishing_LSL" value="LSLA">Low Speed Line A</option>
<option rel="Finishing_LSL" value="LSLC">Low Speed Line C</option>
<option rel="Finishing_LSL" value="LSLD">Low Speed Line D</option>
<option rel="Finishing_LSL" value="LSLE">Low Speed Line E</option>
<option rel="Finishing_LSL" value="LSLG">Low Speed Line G</option>
<option rel="Finishing_LSL" value="LSLH">Low Speed Line H</option>
<option rel="Finishing_LSL" value="LSLI">Low Speed Line I</option>
<option rel="Finishing_LSL" value="LSLJ">Low Speed Line J</option>
<!-- Finishing_MW -->
<option rel="Finishing_MW" value="MWFIN1">Mouthwash Finishing 1</option>
<option rel="Finishing_MW" value="MWFIN2">Mouthwash Finishing 2</option>
<!-- VI_TUBES -->
<option rel="VI_TUBES" value="AISA1">Aisa 1</option>
<option rel="VI_TUBES" value="AISA2">Aisa 2</option>
<option rel="VI_TUBES" value="AISA3">Aisa 3</option>
<option rel="VI_TUBES" value="AISA4">Aisa 4</option>
<option rel="VI_TUBES" value="AISA5">Aisa 5</option>
<option rel="VI_TUBES" value="AISA6">Aisa 6</option>
<option rel="VI_TUBES" value="AISA7">Aisa 7</option>
<option rel="VI_TUBES" value="AISA8">Aisa 8</option>
<option rel="VI_TUBES" value="AISA9">Aisa 9</option>
<option rel="VI_TUBES" value="AISA10">Aisa 10</option>
<!-- VI_PRINTING -->
<option rel="VI_PRINTING" value="KPG1">KPG1</option>
<option rel="VI_PRINTING" value="KPG2">KPG2</option>
<option rel="VI_PRINTING" value="KPG3">KPG3</option>
</select>
</div>
<span>
<div class="form-label"><label for="MachineID">Nazwa Maszyny</label></div>
<div class="form-smallmessage"><input type="text" name="MachineID" id="Machine_input"> </div>
</span>
<span>
<div class="form-label"><label for="DateID">Data wystąpienia problemu</label></div>
<div class="form-smallmessage"><input type="date" name="DateID" id="Date_input"></div>
</span>
<span>
<div class="form-labelbig"><label for="ProblemID">Opisz problem</label></div>
<div class="form-smallmessage"><textarea id="text" name="ProblemID" id ="problem_input" rows="10" cols="22"></textarea></div>
</span>
<span>
<input type="button" value="ZABLOKUJ" id="gobutton">
</span>
</div>
</form>
As you can see on the screen it should show only Lee1-9 instead of all answers..
Can you tell me what did I do wrong and how do I fix it? Its the first time I'm trying to do something like this.
Thanks a lot for your time.

In the part where you call .show() on the options that need to be visible, you should also make sure that you call .hide() on the others...
So do this:
$subcat.find("option").hide().filter("[rel=" + _rel + "]").show();
Applied here:
$(function() {
var $cat = $("#category1"),
$subcat = $("#category2");
$cat.on("change", function() {
var _rel = $(this).val();
$subcat.val("").find("option").attr("style", "");
if (!_rel) return $subcat.prop("disabled", true);
$subcat.find("option").hide().filter("[rel=" + _rel + "]").show();
$subcat.prop("disabled", false);
});
});
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<form>
<div class="form-history">
<span>
<div class="form-label"><label for="employeeID">WPROWADŹ ID TAG</label></div>
<div class="form-smallmessage"><input type="text" name="employeeID" id="employee_input"></div>
</span>
<span>
<div class="form-label"><label for="DzialID">Wybierz dział</label></div>
<div class="form-smallmessage">
<select name="category1" id="category1">
<option value="">Wybierz Dział</option>
<option value="Making_TP">Making Toothpaste</option>
<option value="Making_MW">Making MouthWash</option>
<option value="Finishing_HSL">Finishing HSL</option>
<option value="Finishing_LSL">Finishing LSL</option>
<option value="Finishing_MW">Finishing MouthWash</option>
<option value="VI_TUBES">VI Tubes</option>
<option value="VI_PRINTING">VI Printing</option>
</select>
</div>
</span>
<div class="form-label"><label for="LineID">Wybierz linie</label></div>
<div class="form-smallmessage">
<select disabled="disabled" id="category2" name="category2">
<option value>Wybierz linie</option>
<!-- Making_TP -->
<option rel="Making_TP" value="Lee1">Lee 1</option>
<option rel="Making_TP" value="Lee2">Lee 2</option>
<option rel="Making_TP" value="Lee3">Lee 3</option>
<option rel="Making_TP" value="Lee4">Lee 4</option>
<option rel="Making_TP" value="Lee5">Lee 5</option>
<option rel="Making_TP" value="Lee6">Lee 6</option>
<option rel="Making_TP" value="lee7">Lee 7</option>
<option rel="Making_TP" value="ZOATEC">Zoatec</option>
<option rel="Making_TP" value="Lee9">Lee 9</option>
<!-- Making_MW -->
<option rel="Making_MW" value="MW1">Making MW 1</option>
<option rel="Making_MW" value="MW2">Making MW 2</option>
<!-- Finishing_HSL -->
<option rel="Finishing_HSL" value="HSL1">High Speed Line 1</option>
<option rel="Finishing_HSL" value="HSL2">High Speed Line 2</option>
<option rel="Finishing_HSL" value="HSL3">High Speed Line 3</option>
<option rel="Finishing_HSL" value="HSL4">High Speed Line 4</option>
<option rel="Finishing_HSL" value="HSL5">High Speed Line 5</option>
<option rel="Finishing_HSL" value="HSL6">High Speed Line 6</option>
<option rel="Finishing_HSL" value="HSL7">High Speed Line 7</option>
<!-- Finishing_LSL -->
<option rel="Finishing_LSL" value="LSLA">Low Speed Line A</option>
<option rel="Finishing_LSL" value="LSLC">Low Speed Line C</option>
<option rel="Finishing_LSL" value="LSLD">Low Speed Line D</option>
<option rel="Finishing_LSL" value="LSLE">Low Speed Line E</option>
<option rel="Finishing_LSL" value="LSLG">Low Speed Line G</option>
<option rel="Finishing_LSL" value="LSLH">Low Speed Line H</option>
<option rel="Finishing_LSL" value="LSLI">Low Speed Line I</option>
<option rel="Finishing_LSL" value="LSLJ">Low Speed Line J</option>
<!-- Finishing_MW -->
<option rel="Finishing_MW" value="MWFIN1">Mouthwash Finishing 1</option>
<option rel="Finishing_MW" value="MWFIN2">Mouthwash Finishing 2</option>
<!-- VI_TUBES -->
<option rel="VI_TUBES" value="AISA1">Aisa 1</option>
<option rel="VI_TUBES" value="AISA2">Aisa 2</option>
<option rel="VI_TUBES" value="AISA3">Aisa 3</option>
<option rel="VI_TUBES" value="AISA4">Aisa 4</option>
<option rel="VI_TUBES" value="AISA5">Aisa 5</option>
<option rel="VI_TUBES" value="AISA6">Aisa 6</option>
<option rel="VI_TUBES" value="AISA7">Aisa 7</option>
<option rel="VI_TUBES" value="AISA8">Aisa 8</option>
<option rel="VI_TUBES" value="AISA9">Aisa 9</option>
<option rel="VI_TUBES" value="AISA10">Aisa 10</option>
<!-- VI_PRINTING -->
<option rel="VI_PRINTING" value="KPG1">KPG1</option>
<option rel="VI_PRINTING" value="KPG2">KPG2</option>
<option rel="VI_PRINTING" value="KPG3">KPG3</option>
</select>
</div>
<span>
<div class="form-label"><label for="MachineID">Nazwa Maszyny</label></div>
<div class="form-smallmessage"><input type="text" name="MachineID" id="Machine_input"> </div>
</span>
<span>
<div class="form-label"><label for="DateID">Data wystąpienia problemu</label></div>
<div class="form-smallmessage"><input type="date" name="DateID" id="Date_input"></div>
</span>
<span>
<div class="form-labelbig"><label for="ProblemID">Opisz problem</label></div>
<div class="form-smallmessage"><textarea id="text" name="ProblemID" id ="problem_input" rows="10" cols="22"></textarea></div>
</span>
<span>
<input type="button" value="ZABLOKUJ" id="gobutton">
</span>
</div>
</form>

change the following code
$subcat.find("option").attr("style", "");
to
$subcat.find("option").attr("style", "display:none;");

javascript. how to move selection on the top of a list

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>

Drop-Down List using Javascript HTML and jQuery

I'm trying to create a function in javascript that will see what day it is and depending on a day have a certain drop box list appear. However, for some reason it won't work and I'm not sure where the syntax error is in my code.
HTML:
<html>
<head></head>
<body>
<div class="Questions">
<div id="myAnswers" style="display : none">>
<div id="A">
<p><strong>Where are you Studying</strong></p>
<select>
<option value disabled selected>Choose Location</option>
<option value="1">Answer 1</option>
<option value="1">Answer 2</option>
<option value="1">Answer 3</option>
<option value="1">Answer 4</option>
<option value="1">Answer 5</option>
<option value="1">Answer 6</option>
</select>
</div>
<div id="B" style="display : none">
<select>
<option value disabled selected>Choose Answer</option>
<option value="1">Answer 1</option>
<option value="1">Answer 2</option>
<option value="1">Answer 3</option>
<option value="1">Answer 4</option>
</select>
</div>
</div>
</div>
</body>
</html>
Javascript:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var day= new Date();
var weekday= day.getDay();
$("#A","#B").hide();
function showAnswer(){
if(weekday==3 || weekday==4){
$("#B").show();
}else{
$("#A").show();
}
}
window.onload=showAnswer;
</script>

A few issues to fix before your code can work:
As noted by #junkfoodjunkie you do not need the style="display:none;"
Use new Date(), not new Day()
Use $("#A,#B").hide(), not $("#A","#B")
Feel free to liberally use jQuery since ... :)
$(function() {
var day= new Date();
var weekday= day.getDay();
$("#A,#B").hide();
function showAnswer(weekday) {
if(weekday==3 || weekday==4) {
$("#B").show();
} else {
$("#A").show();
}
}
showAnswer( weekday );
console.log( weekday );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Questions">
<div id="myAnswers">
<div id="A">
<p><strong>Where are you Studying</strong></p>
<select>
<option value disabled selected>Choose Location</option>
<option value="1">Answer 1</option>
<option value="1">Answer 2</option>
<option value="1">Answer 3</option>
<option value="1">Answer 4</option>
<option value="1">Answer 5</option>
<option value="1">Answer 6</option>
</select>
</div>
<div id="B">
<select>
<option value disabled selected>Choose Answer</option>
<option value="1">Answer 1</option>
<option value="1">Answer 2</option>
<option value="1">Answer 3</option>
<option value="1">Answer 4</option>
</select>
</div>
</div>
</div>

How to set tag of select in proper way to have the size of "5"

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>

how to add multiselect checkbox by clicking on button

I want to add multiselect checkbox by clicking on button.i am using bootstrap multiselect.If anything other than bootstrap multiselect is also ok.
functionalities are not working for mutiselct checkbox after clicking on button.
$('#addSupplierbtn').click(function(){
$('#webhost').html($('#multipleSupplier').html());
});
<div id="multipleSupplier" >
<select multiple="multiple" size="10" name="checked[]" id="chked" class='multiselect' >
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3" selected="selected">Option 3</option>
<option value="option4">Option 4</option>
<option value="option5">Option 5</option>
<option value="option6" selected="selected">Option 6</option>
<option value="option7">Option 7</option>
<option value="option8">Option 8</option>
<option value="option9">Option 9</option>
<option value="option0">Option 10</option>
</select>
</div>
<!-- begin snippet: js hide: false -->

var counter = 0;
$('#addSupplierbtn').click(function(){
var anotherselect = $('.multiselect:nth-child(1)').clone();
anotherselect.attr('id', "multiselect"+counter)
$('.multiselect').last().after(anotherselect);
counter ++;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="multipleSupplier" >
<select multiple="multiple" size="10" name="checked[]" id="multiselect" class='multiselect' >
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3" selected="selected">Option 3</option>
<option value="option4">Option 4</option>
<option value="option5">Option 5</option>
<option value="option6" selected="selected">Option 6</option>
<option value="option7">Option 7</option>
<option value="option8">Option 8</option>
<option value="option9">Option 9</option>
<option value="option0">Option 10</option>
</select>
</div>
<input type='button' id='addSupplierbtn' value='Another Select'>
Try this way..

$('#addSupplierbtn').click(function(){
$('#webhost').html($('#multipleSupplier').html());
});
<div id="multipleSupplier" >
<select multiple="multiple" size="10" name="checked[]" id="chked" class='multiselect' >
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3" selected="selected">Option 3</option>
<option value="option4">Option 4</option>
<option value="option5">Option 5</option>
<option value="option6" selected="selected">Option 6</option>
<option value="option7">Option 7</option>
<option value="option8">Option 8</option>
<option value="option9">Option 9</option>
<option value="option0">Option 10</option>
</select>
</div>
<!-- begin snippet: js hide: false -->

Categories