This question already has answers here:
Trigger click on select box on hover
(6 answers)
Closed 2 years ago.
I have a select option that is working nicely on click.
Now, I want that select option will be open when mouse is on hover on that select option.
my html is:
<select name="select" id="inputselect" class="form-control">
<?php
$i=1;
for($i=1; $i<=10; $i++){ ?>
<option value="<?=$i?>">option_<?=$i?></option>
<?php }
?>
</select>
// script will be like this
$('#inputselect').mouseover(function(event){
// code for open the select option on mouse hober
});
Thanks in advance
See the below snippet.Let me know in comments if you have any qns.
$('select').hover(function() {
$(this).attr('size', $('option').length);
}, function() {
$(this).attr('size', 1);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
<option>first</option>
<option>second</option>
<option>third</option>
</select>
You can check the same at Trigger click on select box on hover . You need Chosen for this.
HTML:
<select id="dropdown" data-placeholder="Mouseover">
<option value="one">Option 1</option>
<option value="two">Option 2</option>
<option value="three">Option 3</option>
</select>
JS:
$("#dropdown").chosen().next(".chosen_container").hover(
function(){
$("#dropdown").trigger("liszt:open");
},
function(){
$(this).trigger("click");
}
);
Try This -
$('#inputselect').mouseover(function(event){
$('#inputselect').show();
$('#inputselect')[0].size= $('#inputselect option').length;
});
$('#inputselect').mouseout(function(event){
$('#inputselect').show();
$('#inputselect')[0].size=1;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
<select name="select" id="inputselect" class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
Related
I have 2 select boxes. On change of one select box, I want the other select box to be defaulted to Select a value, ie val()==0, and vice versa. Only one select box should have a value selected at a time. How do I do this? I tried the code below but it does not work.
$("#select_one").change(function() {
if ('#select_two'.val() != 0) {
$('#select_two').val(0);
}
});
The simplest way to do this would be to place a common class on both the select. You can then select that class in jQuery and use not() to exclude the current element before resetting the value, something like this:
$('.select').change(function() {
$('.select').not(this).val(0);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select-one" class="select">
<option value="0">Please select</option>
<option>Foo</option>
<option>Bar</option>
<option>Fizz</option>
<option>Buzz</option>
</select>
<select id="select-two" class="select">
<option value="0">Please select</option>
<option>Foo</option>
<option>Bar</option>
<option>Fizz</option>
<option>Buzz</option>
</select>
You may set the selectedIndex to 0:
$('select[id^="select_"]').on('change', function(e) {
$('select[id^="select_"]').not(this).prop('selectedIndex', 0);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select_one">
<option value="volvo">1</option>
<option value="saab">2</option>
<option value="mercedes">3</option>
<option value="audi">4</option>
</select>
<select id="select_two">
<option value="volvo">11</option>
<option value="saab">22</option>
<option value="mercedes">33</option>
<option value="audi">44</option>
</select>
That could be done using two simple change events, like the following example.
Else if you want to use one event you could use a common class as #Rory McCrossan answer shows..
Hope this helps.
$("#select_one").change(function() {
$('#select_two').val(0)
});
$("#select_two").change(function() {
$('#select_one').val(0)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select_one">
<option value="0">Default</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<br>
<select id="select_two">
<option value="0">Default</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
I have some dropdowns in a form that are generated by a backoffice. At the end of each choice in the dropdown something is added between (brackets). How can I not show these brackets and their variable content? Leaving only the content before the brackets.
<select>
<option value="volvo">Volvo (30.000)</option>
<option value="saab">Saab (40.000)</option>
<option value="opel">Opel (15.000)</option>
<option value="audi">Audi (45.000)</option>
</select>
<select>
<option value="dog">Dog (300)</option>
<option value="cat">Cat (50)</option>
<option value="fish">Fish (5)</option>
</select>
Try this;
var carList=[{name:"Audi (45.000)" },{name:"Saab (40.000)"},{name:"Opel (15.000)"},{name:"Audi (45.000)"}];
var $cars=$("#cars");
$cars.empty();
carList.forEach(function(index){
$cars.append(new Option(index.name.split("(")[0].trim()))
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="cars">
</select>
For all select elements
$("select").each(function(){
var $wrapper=$(this);
var $options=$wrapper.find("option");
$wrapper.empty();
$options.each(function(index){
$wrapper.append(new Option($(this).text().split("(")[0].trim()))
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<select>
<option>Fiat (32.00)</option>
<option>Audi (12.00)</option>
</select>
<select>
<option>Bmw (32.00)</option>
<option>Tofas (22.00)</option>
</select>
<select>
<option>Dog (1.00)</option>
<option>Fish (0.00)</option>
</select>
I have 2 drop down list
<select id="servergroup" multiple="multiple">
<option value="P1">P1</option>
<option value="P2">P2</option>
<option value="P3">P3</option>
<option value="P4">P4</option>
</select>
<select id="servername" multiple="multiple">
<option value="s597ap233">s597ap233</option>
<option value="s597dp392">s597dp392</option>
<option value="s397dp095">s397dp095</option>
</select>
I want that the second drop down list should get enabled only if we choose a value in the first drop down list. It should again get disabled if we deselect the value from the first drop down list.
May I know how can this be achieved using jQuery?
You can use the disabled attribute and using JavaScript, you can set it as false or true
function check(){
if(document.getElementById('servergroup').value!='')
document.getElementById('servername').disabled=false;
else
document.getElementById('servername').disabled=true;
}
<select onchange="check()" id="servergroup" multiple="multiple">
<option value="P1">P1</option>
<option value="P2">P2</option>
<option value="P3">P3</option>
<option value="P4">P4</option>
</select>
<select disabled id="servername" multiple="multiple">
<option value="s597ap233">s597ap233</option>
<option value="s597dp392">s597dp392</option>
<option value="s397dp095">s397dp095</option>
</select>
$('#bonusVoucher').prop('disabled',false);
jQuery('#bonusVoucher').selectpicker('refresh');
Use selectpicker like this and the most IMPORTANT part is this:
Note: Place your bootsrap selectpicker script after jquery script.
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/js/bootstrap-select.min.js"></script>
jQuery solution.
function change() {
if ($('#servergroup option:selected').length) {
$('#servername').attr('disabled', false);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="servergroup" multiple="multiple" onchange='change()'>
<option value="P1">P1</option>
<option value="P2">P2</option>
<option value="P3">P3</option>
<option value="P4">P4</option>
</select>
<select id="servername" multiple="multiple" disabled>
<option value="s597ap233">s597ap233</option>
<option value="s597dp392">s597dp392</option>
<option value="s397dp095">s397dp095</option>
</select>
First add
<option value="-1"> -Select Server Group- </option>
and
<option value="-1"> -Select Server Name- </option>
to Your Dropdown boxes respectively.
We can achieve requested actions using JQuery as Follows:
$(document).ready(function ()
{
//making serverName Dropdown box disabled by default.
$('#servername').prop('disabled', true);
$('#servergroup').change(function ()
{
if($(this).val == "-1")
{
$('#servername').val = "-1";
$('#servername').prop('disabled', true);
}
else
{
$('#servername').prop('disabled', false);
}
});
});
I have 3 selectbox on my page and onClick of close button I want to clear all the selectbox which are under the class .popup.
Below is my code to clear fields.
clearText: function() {
$('.popupBody input').val('');
$('.popupBody select').val('');
$('.popupForm').find('.errmsgActive').removeClass('errmsgActive');
$('.popupForm').find('.errmsg').html('');
}
For clearing all select boxes inside .popupBody class, I am using below code.
$('.popupBody select').val('');
For clearing selection made in select2 select box you can try following approach:
$('.popupBody select').each(function(){
//iterate over all the select boxes one by one
$(this).select2("val", ""); //clearing the selection made
});
try this, this will work for you.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div class="popupBody">
<label>Select option one</label>
<select>
<option value="">-- select --</option>
<option>select1 value 1</option>
<option>select1 value 2</option>
<option>select1 value 3</option>
</select>
<br><br><br>
<label>Select option two</label>
<select>
<option value="">-- select --</option>
<option>select2 value 1</option>
<option>select2 value 2</option>
<option>select2 value 3</option>
</select>
<br><br><br>
<label>Select option Three</label>
<select>
<option value="">-- select --</option>
<option>Stackoverflow</option>
<option>is</option>
<option>awesome</option>
</select>
<br><br><br>
<input type="button" name="" value="CLEAR" id="closebutton">
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#closebutton").click(function(){
$("div.popupBody select").val("");
});
});
</script>
</body>
</html>
To reset a dropdown you need to select the default element usually the first one:
$('.popupBody select').find('option:first-child').attr('selected','selected');
to reset the value in select2 use
$('.popupBody select').select2("val", "");
Your code is looks good.. obviously $('.popupBody select').val(''); is clearing value of select dropdown under .popupBody.
BUT
Make sure, all select input must have option value=''.
See below code
$(".popupBody select").select2();
$("#clear").click(function(){
$('.popupBody select').val('-1').change();
})
#import "https://select2.github.io/dist/css/select2.min.css";
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://select2.github.io/dist/js/select2.full.js"></script>
<div class="popupBody">
<select>
<option value="-1">Select</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select>
<option value="-1">Select</option>
<option value="A1">A1</option>
<option value="B1">B1</option>
<option value="C1">C1</option>
</select>
<select>
<option value="-1">Select</option>
<option value="A2">A2</option>
<option value="B2">B2</option>
<option value="C2">C2</option>
</select>
</div>
<button id="clear">Clear</button>
I am trying to make a page when someone clicks on a option in the select form, another select form appears then another without having to refresh the page. I know you use AJAX for not refreshing but my code is somehow not working when tried.
HTML
<div id="example">
<select id="foo">
<option value="">lets make another</option>
<option value="index.html">Demographic</option>
<option value="index.html">Crime</option>
<option value="index.html">School</option>
</select>
</div>
<div id="result">
</div>
javascript(AJAX)
$(document).ready(function() {
$('#example').on('click', 'button.switch', function() {
$.ajax('AjaxLoadedContent.html')
.done(function(response){
$('#result').html(response);
});
});
});
Content thats suppose to load(Another select form)
<select id="foo">
<option value="">Pick a site</option>
<option value="index.html">Demographic</option>
<option value="index.html">Crime</option>
<option value="index.html">School</option>
</select>
But whats wrong??
As #Goose said in the comments, instead of using an Ajax call you could hide the select boxes and show them based on the value of the shown select option, as shown below:
HTML
<div id="example">
<select id="foo">
<option value="">lets make another</option>
<option value="demographic">Demographic</option>
<option value="crime">Crime</option>
<option value="school">School</option>
</select>
<select id="demographic" class="toggle">
<option value="">Demographic</option>
<option value="d1">d1</option>
<option value="d2">d2</option>
<option value="d3">d3</option>
</select>
<select id="crime" class="toggle">
<option value="">Crime</option>
<option value="c1">c1</option>
<option value="c2">c2</option>
<option value="c3">c3</option>
</select>
<select id="school" class="toggle">
<option value="">School</option>
<option value="s1">s1</option>
<option value="s2">s2</option>
<option value="s3">s3</option>
</select>
</div>
<div id="result"></div>
CSS
.toggle {
display:none;
}
JS
$('#foo').on('change', function(){
var val = $(this).val();
$('.toggle').hide();
$('#'+val).show();
});
Fiddle
If your content is fairly static, I'd use the following code that doesn't invoke additional http calls:
HTML:
<div id="example">
<select id="foo">
<option value="">lets make another</option>
<option value="">Demographic</option>
<option value="">Crime</option>
<option value="">School</option>
</select>
</div>
<div id="result">
<select id="foo">
<option value="">Pick a site</option>
<option value="">Demographic</option>
<option value="">Crime</option>
<option value="">School</option>
</select>
</div>
JS:
$(function() {
$("#result").hide();
$("#foo").click(function() {
$("#result").show();
});
});
Let me know if it helps. Cheers!