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 -->
Related
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;");
<select class="name">
<option value="">Select Option</option>
<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>
</select>
Remove Select Option when user click on it like input field placeholder. Also not show in drop down.
<select class="name">
<option value="" style="display:none;">Select Option</option>
<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>
</select>
style="display:none;" should do the trick (Selected by default but not visible under options).
You can instated use <option value="" disabled selected>Select Option</option>
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>
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>
Here, I have an example of jquery-chosen with modal dialog. What I want is on first open of the dialog, the chosen to not show the items. I read the documentation and I don't find anything.
So in the current example the modal options should be closed after running the fiddle example:
HTML
<div id="dialog">
<label for="options1">Modal Options</label>
<select id="options1" multiple="multiple">
<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>
</select>
</div>
<label for="options1">Options</label>
<select id="options2">
<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>
</select>
JS
$(function(){
$("select").chosen();
$("#dialog").dialog({modal: true, width:400, height:"auto"});
});
Call jQuery chosen after calling dialog.
$(function(){
$("#dialog").dialog({modal: true, width:400, height:"auto"});
$("select").chosen();
});