Toggle selection from list with javascript [duplicate] - javascript

This question already has answers here:
How to toggle selection of an option in a multi-select with jQuery?
(8 answers)
Closed 6 years ago.
I have multiple select boxes used for filtering data from a database.
For example select box 1:
<select name="team" multiple size="3">
<option value="1">Team 1</option>
<option value="2">Team 2</option>
<option value="3">Team 3</option>
</select>
And select box 2:
<select name="name" multiple size="3">
<option value="John">John</option>
<option value="Mary">Mary</option>
<option value="Ryan">Ryan</option>
</select>
Problem is once i select a value from a field i can't deselect it and i don't want to reset all filters and start allover. I would like to be able to deselect the selected option on second click, for each box ... i.e.: 1st click => select / 2nd click=> deselect.
How is the easiest way to do this?
Thank you for patience!

Try something like this
<select id="select1" name="team" multiple size="3">
<option value="1">Team 1</option>
<option value="2">Team 2</option>
<option value="3">Team 3</option>
</select>
<select id="select2" name="name" multiple size="3">
<option value="John">John</option>
<option value="Mary">Mary</option>
<option value="Ryan">Ryan</option>
</select>
Jquery
$("#select1").change(function(){
$("#select2").val(null);
});
$("#select2").change(function(){
$("#select1").val(null);
});

Try this
$( "select" ).dblclick(function(){
$( this ).val("");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<select name="team" multiple size="3">
<option value="1">Team 1</option>
<option value="2">Team 2</option>
<option value="3">Team 3</option>
</select>
<select name="name" multiple size="3">
<option value="John">John</option>
<option value="Mary">Mary</option>
<option value="Ryan">Ryan</option>
</select>

Related

Need code to only run when 'other' option is selected | Javascript / swig

I want to use swig (it is my templating engine) to insert JavaScript so that the following shows only when the select option 'other' is chosen.
<div class="form-group">
<select class="custom-select">
<option selected>Select Switch Manufacturer</option>
<option value="cisco">Cisco</option>
<option value="netgear">NetGear</option>
<option value="d-link">D-link</option>
<option value="tp-link">TP-link</option>
<option value="hewlett-packard">Hewlett-Packard</option>
<option value="linksys">Linksys</option>
<option value="allied">Allied</option>
<option value="brocade">Brocade</option>
<option value="other">Other</option>
</select>
This is the code I want to only show when the user selects the 'other' option in the code above. How can I do this with Javascript / swig?
<div class="form-group">
<input type="text" class="form-control" id="switch-manufacturer" placeholder="Switch Manufacturer">
</div> <!-- Switch Manufacturer other input only show when above 'other' is selected -->
I made a pen for you.
https://codepen.io/anon/pen/WZENjo
You just need to use the value property of the <select> element.
I used a button to call the function, you can use whatever you want, including adding an onclick to the <select> element, which would look something like this.
<div class="form-group">
<select class="custom-select" id="sel" onclick="foo()">
<option selected>Select Switch Manufacturer</option>
<option value="cisco">Cisco</option>
<option value="netgear">NetGear</option>
<option value="d-link">D-link</option>
<option value="tp-link">TP-link</option>
<option value="hewlett-packard">Hewlett-Packard</option>
<option value="linksys">Linksys</option>
<option value="allied">Allied</option>
<option value="brocade">Brocade</option>
<option value="other">Other</option>
</select>

How to dynamically display a placeholder and deselect the other options, in a select form menu using Javascript/Jquery

I have the following drop-down menu:
<form action="...">
<select name="fruits" id="my-fruits">
<option value="" disabled selected>Select a fruit</option>
<option value="apple">apple</option>
<option value="orange">orange</option>
<option value="peach">peach</option>
</select>
<select name="animals" id="my-animals">
<option value="" disabled selected>Select an animal</option>
<option value="dog">dog</option>
<option value="cat">cat</option>
<option value="iguana">iguana</option>
></select>
</form>
What I need is when the user changes the selected option in one filed (i.e. on change event), the placeholder to be displayed on the other and vice-versa.
For example, lets say that the user had already selected orange in #my-fruits. Now, when the user changes the selection from dog to cat in #my-animals:
the placeholder "Select a fruit" to be displayed automatically on #my-fruits field, and
then, the <option value="orange"> have its "selected" attribute removed
Ira, try this:
$('#my-fruits')
.add('#my-animals')
.on('change', function () {
$(this).siblings().prop('selectedIndex', 0);
});
Also, remove unnecessary arrow in this line:
></select>
Good luck ;)
$('select').change(function() {
$(this).siblings('select').prop('selectedIndex', 0);
console.log($('option:selected', this).val())
console.log($(this).siblings('select').val())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form action="...">
<select name="fruits" id="my-fruits">
<option value="" disabled selected>Select a fruit</option>
<option value="apple">apple</option>
<option value="orange">orange</option>
<option value="peach">peach</option>
</select>
<select name="animals" id="my-animals">
<option value="" disabled selected>Select an animal</option>
<option value="dog">dog</option>
<option value="cat">cat</option>
<option value="iguana">iguana</option>
</select>
</form>
Just set the selected option of sibling select to first index
Try
$('#animals').change(function() {
$('#fruits').val("");
});

HTML select multiple option failed

I'm trying to use multiple select option in my html page
I'm using materialized css
I used the below code
But it is not working
Can anyone help me with this please
<select multiple size='6' name='list[ ]'>
<option>One</option>
<option>Two</option>
<option selected>Three</option>
<option>Four</option>
<option>Five</option>
<option selected>Six</option>
</select>
Check your syntax.
If you are using materialize css, it should work.
http://materializecss.com/forms.html
Go to "select" and check syntax.
<div class="input-field col s12">
<select multiple>
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Materialize Multiple Select</label>
</div>
Also initialize select by adding
$(document).ready(function() {
$('select').material_select();
});

If Select tag option is selected shows another select tag [duplicate]

This question already has answers here:
Populating One Select Box Based on the Selection in Another Select Box - JQuery?
(3 answers)
Closed 8 years ago.
I need code either in js or jquery or php like this.
<select id="1">
<option value="1">....</option>
<option value="2">....</option>
<option value="3">....</option>
</select>
If option value 3 is selected, it should populate another select like
<select id="2">
-
-
</select>
if not value 3 is selected nothing happens.
You can do this by hiding and showing the other select depending on the value that is chosen (unless you want to populate the results dynamically after clicking option 3 in which case you will have to be more specific)
HTML
<select id="select1">
<option>Choose One</option>
<option value="1">Val 1</option>
<option value="2">Val 2</option>
<option value="3">Val 3</option>
</select>
<select id="select2">
<option>Choose Two</option>
<option value="1">Val 1</option>
<option value="2">Val 2</option>
<option value="3">Val 3</option>
</select>
CSS
#select2{
display: none;
}
JS
$("#select1").change(function(){
if($(this).val() == 3){
$("#select2").show();
}else{
$("#select2").hide();
}
});
FIDDLE
Here is a PURE Javascript Solution
See this fiddle
Javascript
function myFunction() {
var x = document.getElementById("id1").value;
if (x == "3") document.getElementById("id2").style.display = "block";
}
HTML
<select id="id1" onchange="myFunction()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="id2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
CSS
#id2 {
display:none;
}
Use this
Html
<select id="1">
<option value="1">....</option>
<option value="2">....</option>
<option value="3">....</option>
</select>
<select id="2" style="display:none;">
<option value="1">....</option>
<option value="2">....</option>
<option value="3">....</option>
</select>
Your Jquery Here
$("#1").change(function(){
if($(this).val() == 3){
$("#2").show();
}else{
$("#2").hide();
}
});
Try this..
<select id="1" class="first">
<option value="1">....</option>
<option value="2">....</option>
<option value="3">....</option>
</select>
<select id="2" style="display:none;">
<option value="1">....</option>
<option value="2">....</option>
<option value="3">....</option>
</select>
$(".first").change(function(){
var selectvalue=$(".first").val();
if(selectvalue==3)
{
$("#2").show();
} else {
$("#2").hide();
}
});

Show submit button on multiple forms only if option selected

I need to show the submit button on many forms on the same page only if one option from a select is selected.
I have:
<form id="1">
<input type="text">
<select>
<option value="">Select one value</option>
<option value="1">value 1</option>
<option value="2">value 2</option>
</select>
<input type="submit">
</form>
and
<form id="2">
<input type="text">
<select>
<option value="">Select one value</option>
<option value="1">value 1</option>
<option value="2">value 2</option>
</select>
<input type="submit">
</form>
so, I need to show the submit button only if an option of the select is selected
Thanks!!!
This a working example with you html http://jsfiddle.net/g188o5eg/
$('select').on('change', function(){
if($(this).val() != ''){
$(this).parent().find('input[type="submit"]').show();
} else {
$(this).parent().find('input[type="submit"]').hide();
}
});
It will work with all forms on your site :)
Try something like this (would work with multiple select boxes (uses the nearest submit):
<form>
<input type="text">
<select class="select">
<option value="">Select one value</option>
<option value="1">value 1</option>
<option value="2">value 2</option>
</select>
<input type="submit" class="submitbutton">
<script type="text/javascript">
$('.submitbutton').hide();
$('.select').click(function() {
$(this).closest('.submitbutton').show();
});
</script>

Categories

Resources