Select Box Running Change Function With Size Attribute - javascript

I am working with select box. I use select box like as below:
<select name="cars" onchange="jsFunction()">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<script>
function jsFunction(){
console.log($(.names).val());
}
<script>
The combo is look like as below:
THis function is working when the comboboz is chenged.But i want to show all option at the same time. But i don't want to use multiple option select. So that i used size option like as below:
<select name="cars" size="4" onchange="jsFunction()">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
And then the select box look like as below:
And only only one option can selected. But my problem is not working function. When i use size attribute, and then the function is not triggered when selectbox is changed. When i remove this size, and then the function is triggered.
How can i show all option at the same time (without multiselect) without using size attribute ? Or how can i trigger this function with size attribute ?

Your JavaScript function shouldn't log anything at all, as it has a syntax error. $(.names) needs quotes around names. Also, it needs to reflect the class of your <select>.
First you need to add the class names to your select:
<select name="cars" size="4" class="names" onchange="jsFunction()">
And then add quotes around your jQuery DOM target:
console.log($('.names').val());
Here's the new code:
function jsFunction() {
console.log($('.names').val());
}
<select name="cars" size="4" class="names" onchange="jsFunction()">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
I've created a fiddle showcasing this here.
Hope this helps!

Related

how can i call select box on change while changing select value using jquery?

I am having a select box like this
<select class="cars" onChange="carName()">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
If am changing dropdown values carName function is calling and working as expected. If suppose I change the value using jQuery like this
$('.cars').val('Audi');
I want that carName() function to be called.How can I do this?
You need to .trigger() event programmatically
Execute all handlers and behaviors attached to the matched elements for the given event type.
Also, value is case sensitive, so use correct value. use audi instead of Audi
Code,
$('.cars').val('audi').trigger('change');
Also since you are using jquery bind event using it like
$('.cars').on('change', carName); //Or, $('.cars').change(carName);
function carName() {
alert('In carName function');
}
$(document).ready(function() {
$('.cars').val('audi').trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="cars" onChange="carName()">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
I think you might want to add .change()
$('#cars').change(function() {
carName();
});

Is it possible to add an horizontal scroll bar to an html select box? [duplicate]

This question already has answers here:
How to get horizontal scroll bar in select box in IE?
(2 answers)
Closed 9 years ago.
I have below html code.
<!DOCTYPE html>
<html>
<body>
<select>
<option value="volvo">Volvoooooooooooooooootooooooolargeeeeeeeeeeee</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</html>
The problem is when it goes beyond the page then it gives vertical scroll bar. But the problem is if the value is too large then select box width is auto expanded to accommodate the width of the value. But i don't want it to expand. I want a horizontal scrollbar to come if the option value is too large.
How can I do that?
As others have said, this is not possible. However, there is no need for a scrollbar on the option list if your goal is simply to make the select small while keeping the options fully visible. If you limit the width of your select through CSS, you will see that the browser automatically makes the whole width of the option list visible.
select { width: 100px; }
Edit: See my previous answer on this topic. Firefox, Chrome, and IE10 will make the option list wider than the select if necessary, but IE9 will not. The other answers to that question link to this question with fixes for old IE: Dropdownlist width in IE.
You can't. The native controls are completely governed by the browsers HTML renderer. You'll need to look at a <select> styling plugin if you want to style the dropdown.
Unfortunately you cant do horizontal scrollbars using the default select boxes. You could try using a javascript replacement like Select2 or Chosen. Both of these allow you to format the dropdown options with CSS and you should be able to control their formatting however you like.

unable to get attribute from event handler "this" object

<select onchange="alert($(this).attr('data-type'))">
<option data-type="1" value="a">a</option>
<option data-type="2" value="b">b</option>
</select>
When I run that on jsfiddle I get null. Any ideas?
Here's the js fiddle:
http://jsfiddle.net/49wyG/
Thanks!
You have to grab the selected index of the element and go from there, try this:
<select onchange="alert(this.options[this.selectedIndex].getAttribute('data-type'));">
<option data-type="1" value="a">a</option>
<option data-type="2" value="b">b</option>
</select>
Works good on my end.
The data-type attributes are on the option elements not the select. I assume you want the data type of the currently selected one
<select onchange="alert($(this).find(':selected').attr('data-type'))">
<option data-type="1" value="a">a</option>
<option data-type="2" value="b">b</option>
</select>
http://jsfiddle.net/49wyG/4/
The this refers to the select not the option. Try this instead:
<select>
<option data-type="1" value="a" onclick="alert($(this).attr('data-type'))">a</option>
<option data-type="2" value="b" onclick="alert($(this).attr('data-type'))">b</option>
</select>
Alternatively you could use the :selected selector or this.selectedIndex to grab the option. Something like this:
<select onchange="alert($(':selected',this).attr('data-type'))" >
you need to do this...
<select onchange="alert(this.options[this.selectedIndex].getAttribute('data-type'))">
<option data-type="1" value="a">a</option>
<option data-type="2" value="b">b</option>
</select>
the "this" object on the change event is the list, not the option

html dropdown selected value

I have one dropdown in my html page that contains some 5 values: A, B, C, D, E. When I select C and page refresh, I want to reset all the selected values to the default page. How do I do that? Currently, when I am refreshing the page, the dropdown value is showing the previously selected value. So how do I do that?
You can add a function to body's onload function and set selected value of the dropdown to desired index.
Add autocomplete="off" to your tag so it will not populate fields automatically.
Just add the selected="selected" attribute to the <option> tag, which will make it the default selected drop-down list value, instead of using JavaScript.
<form>
<select>
<option value="default" selected="selected">Select A Letter:</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
</form>​​​
JSFIDDLE
You can try this:
<select autocomplete="off">
<option value="">Select none</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
<option value="5">E</option>
</select>
[1]: http://jsfiddle.net/nR6CP/2/

Selected only one values

i have:
<select id="number" name="number">
<option value=""></option>
<option value="1">01</option>
<option value="2" selected="selected">02</option>
<option value="3">03</option>
<option value="4" selected="selected">04</option>
<option value="5">05</option>
</select>
and next with jQuery i use for example:
$('#number').val(1);
but this add next value - 1 and now i have:
<select id="number" name="number">
<option value=""></option>
<option value="1" selected="selected">01</option>
<option value="2" selected="selected">02</option>
<option value="3">03</option>
<option value="4" selected="selected">04</option>
<option value="5">05</option>
</select>
what i must use with:
$('#number').val(1);
that all others value can be not selected? So i would like - if i set new val then all others values can be reset. Maybe use each for reset, but how?
I know - this should be multiselect = false, but this is not my code - i must use this this jQuery.
Are you using a multiple select? Because the HTML you've added indicates that you're not. If you're not working with a multiple select, then your HTML with several selected="selected" doesn't make any sense.
If you are working with a multiple select, then setting .val() should clear the other selections. (Demo). If in some weird browser it isn't, you could try manually resetting the select:
$('#number option').prop('selected', false).val(1);
If clearing the current selection is not what you want, then you should consider setting the selected property manually, rather than using .val()
$('#number option[value=1]').prop('selected', true);
Demo

Categories

Resources