javascript onclick alert not working in chrome - javascript

<select name="history" id="history" >
<option value="history 1" onClick="alert('h1');">history 1</option>
<option value="history 2" onClick="alert('h2');">history 2</option>
<option value="clearhistory" onClick="this.form.submit();" >Clear History</option>
</select>
could someone help me with this script?
i am expecting that whenever the user clicks history 1 ..it will alert h1
the script works in firefox and IE but not in Chrome :(

If you want to use onClick for option element in Chrome, IE, etc., you must use short fix: set onChange attribute of select element to "this.options[this.selectedIndex].onclick()"

use onchange instead of onclick for select lists.
<select name="history" id="history" onchange="historyChanged(this);">
<option value="history1">history 1</option>
<option value="history2">history 2</option>
<option value="clearhistory">Clear History</option>
</select>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function historyChanged() {
var historySelectList = $('select#history');
var selectedValue = $('option:selected', historySelectList).val();
alert(selectedValue);
if (selectedValue == 'clearHistory') {
historySelectList.form.submit();
}
}
$(function() {
alert('my alert');
$('select#history').change(historyChanged);
});
</script>

Use onChange on the select instead of each option. here is the jsfiddle http://jsfiddle.net/tBjkg/
<select name="history" id="history" onChange="alert(this.value);">
<option value="history1">history 1</option>
<option value="history2">history 2</option>
<option value="clearhistory">Clear History</option>
</select>
The alert(this.value) is referring to the value of the option within the select that is currently selected.

In some browsers,
choosing same option second time,
no onchange-event throws.
This helps:
<select onchange="alert/*orwhateveryoudowith:*/(this.value);/*but set:*/this.selectedIndex=0">
<option disabled selected>Choose your Plan</option>
<option value=1>Plan 1</option>
<option value=2>Plan 2</option>
<option value=3>Plan 3</option>
</select>

Although the selected solution works, but here is a more clearer and easy way to do this:
<select name="history" id="history" >
<option value="history 1">history 1</option>
<option value="history 2">history 2</option>
<option value="clearhistory">Clear History</option>
</select>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#history').on('change', function() {
if ( this.value == 'history 1')
{
alert('h1');
// You can also do anything here
}
if ( this.value == 'history 2')
{
alert('h2');
// You can also do anything here
}
if ( this.value == 'clearhistory')
{
this.form.submit();
// You can also do anything here
}
});
});
</script>

Related

Mutually exclusive select boxes

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>

Enable/disable drop down list based on another drop down list

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);
}
});
});

jQuery mobile - dynamically switch Select Menu to Multiple

I want to enable the multiple select when I checked the checkbox, but it doesn't work. How to achieve this using jQuery mobile?
<input type="checkbox" id="toggle"/>Toggle Select
<select name="targets" id="targets">
<option value="0">-----Select an option ----</option>
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
</select>
$(document).ready(function() {
$("#toggle").on('click', function() {
if ($(this).is(':checked') == true){
$("#targets").attr('multiple', true).attr("data-native-menu","false");
} else {
$("#targets").attr('multiple',false);
}
});
});
Try this
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<style>
</style>
</head>
<body>
<input type="checkbox" id="toggle"> Toggle Select
<select name="targets" id="targets">
<option value="0">-----Select a option ----</option>
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
</select>
<script>
$(document).ready(function(){
$("#toggle").on('click',function(){
if($(this).is(':checked')==true){
$("#targets").attr('multiple',true).attr("data-native-menu","false");
}else{
$("#targets").attr('multiple',false);
}
});
});
</script>
</body>
</html>
You are using attr() function which is good for simple HTML attributes.
However, in the newer versions of jQuery (after 1.6), for element properties like readonly, checked, multiple you need to use jQuery prop() function.
Try changing the function:
$(document).ready(function() {
$("#toggle").on('click', function() {
if ($(this).is(':checked') == true){
$("#targets").prop('multiple', true).attr("data-native-menu","false");
} else {
$("#targets").prop('multiple',false);
}
});
});
You can read more about jQuery.prop() here.
Here is my JS Fiddle Demo which works.
Start with data-native-menu="false" in the markup:
<label><input type="checkbox" id="toggle" />Toggle Select</label>
<select name="targets" id="targets" data-native-menu="false">
<option value="0">-----Select an option ----</option>
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
</select>
Then on the checkbox change event, destroy the selectmenu widget, update the multiple prop, and reinitialize it:
$("#toggle").on('change', function () {
$("#targets").selectmenu("destroy").prop('multiple', $(this).is(':checked')).selectmenu();
});
DEMO
If you want the native menu for single select, change the code to:
$("#targets").selectmenu("destroy").prop('multiple', $(this).is(':checked')).selectmenu({ nativeMenu: !$(this).is(':checked')});
DEMO

Call a javascript function from select element in HTML

function Myfunc(obj1)
{
alert(obj1.prop('outerHTML'));
}
<select id="myselect" onchange="MyFunc(jQuery(this))">
<option value="v1">Value 1</option>
<option value="v2">Value 2</option>
<option value="v3" selected="selected">Value 3</option>
</select>
I have the above two snippets.
When i do alert of the object i get the complete <select&tg; tag along with all it's options.
But, What i want is the object passed should only just be the option which i have selected and not the complete select element block.
Instead of outdated onchange you can use jQuery $('selector').change(function() { });
Fiddle.
Simplified HTML:
<select id="myselect">
<option value="v1">Value 1</option>
<option value="v2">Value 2</option>
<option value="v3" selected="selected">Value 3</option>
</select>
JS:
$(document).ready(function()
{
$('#myselect').change(function()
{
alert($(this).find(':selected').text());
});
});
Update. If you need selected <option> outer HTML, then it can be:
Fiddle.
$(document).ready(function()
{
$('#myselect').change(function()
{
alert($(this).find(':selected')[0].outerHTML);
});
});
Try:
onchange="MyFunc(jQuery(this).find('option:selected'))"
Use as
function MyFunc(obj1)
{
alert($("#myselect option:selected").text());
}
DEMO
OR You can use
function MyFunc(obj1)
{
alert($("#myselect option:selected").html());
}
DEMO
You can pass object or you can fetch selected option in function.
To get selected option html in function use below code -
NOTE - please correct spelling of function either in onchange or function declaration.
function MyFunc(obj1)
{
var value = obj1.value;
var optionHTML = $(obj1).find('option[value="'+value+'"]');
alert($('<div>').append(optionHTML.clone()).html());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="myselect" onchange="MyFunc(this)">
<option value="v1">Value 1</option>
<option value="v2">Value 2</option>
<option value="v3" selected="selected">Value 3</option>
</select>
Another way is to bind change event handler using jquery and get the option html
$('#myselect').change(function(){
var value = $(this).val();
var option = $(this).find('option[value="'+value+'"]');
var optionHTML = $('<div>').append(option.clone()).html();
alert(optionHTML);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<select id="myselect">
<option value="v1">Value 1</option>
<option value="v2">Value 2</option>
<option value="v3" selected="selected">Value 3</option>
</select>
You can use :selected selector follows:
$(document).ready(function() {
$('#myselect').on('change', function() {
alert($(this).find('option:selected').eq(0));
});
});

how to hide\show items in ddl

I have a ddl control. I want to change the visibility of some items on the client-side (JS).
I only found methods to insert\remove items.
But I only want to hide\show them.
Does someone has an idea how to do so ?
You need to access the item and set its [edit]style.display[/edit] to "none":
<html>
<head>
<script type="text/javascript">
function hideItem() {
document.getElementById("a3").style.display = "none";
}
</script>
<body onload="hideItem()">
<form>
<select name="ddl" size="1">
<option id="a1">Option 1</option>
<option id="a2">Option 2</option>
<option id="a3">Option 3</option>
<option id="a4">Option 4</option>
<option id="a5">Option 5</option>
</select>
</form>
</body>
</html>
I think you are looking for the
<span style="display:none">
option. You can toggle this style using Javascript.
In Firefox, you can use the display style:
<select id="s" name="ddl" size="1">
<option id="a1">Option 1</option>
<option id="a2">Option 2</option>
<option id="a3">Option 3</option>
<option id="a4">Option 4</option>
<option id="a5">Option 5</option>
</select>
and:
document.getElementById("a3").style.display = "none";
However, this will not work on Internet Explorer. For IE, you can only remove the element entirely (possibly re-adding it later):
document.getElementById("s").options[2] = null;
You could move the element to a separate, hidden <select /> if you want to store it somewhere for adding back later.
The only thing you can do is removing the option.
You can do this simply in jQuery by:
$('#yourOptionId').remove();
Or you can disable the option by:
$('#yourOptionId').attr('disabled', 'disabled');
And enable by:
$('#yourOptionId').removeAttr("disabled");
But no there is no way to simply hide an option.
By "ddl control" I'm assuming the structure will be like:
<select id="selectId">
<option id="optionId"></option>
</select>

Categories

Resources