Develop Reference

onclick is not working inside option tag in selectpicker dropdown [duplicate]

I am using onclick event in option tag for select box
<select>
<option onclick="check()">one</option>
<option onclick="check()">two</option>
<option onclick="check()">three</option>
</select>`
onclick event is not working on IE and Chrome but it is working fine in firefox,
here I don't want to use onchange event on select tag bcz it will not trigger an event if user selects same option again
Eg:say first time user selects "one" dropdown I will open a popup after processing some stuff user closes the popup,suppose if user wants to select same "one" dropdown it will not trigger any event.this can be solved using onclick event on option tag but its not working on IE and chrome
Is there any work around for this ?

onclick event on option tag will fail on most versions of IE, Safari and Chrome: reference
If you want to trigger an event whenever user select, why not simply use:
<select onclick="check()">
<option>one</option>
<option>two</option>
<option>three</option>
And if you want to do something with the specific option user selected:
<select onclick="if (typeof(this.selectedIndex) != 'undefined') check(this.selectedIndex)">
<option>one</option>
<option>two</option>
<option>three</option>
This way you are guaranteed to call check() if and only if an option is selected.
Edit: As #user422543 pointed out in the comments, this solution will not work in Firefox. I therefore asked another question here: Why does Firefox react differently from Webkit and IE to "click" event on "select" tag?
So far it seems using <select> tag is will not work consistently in all browsers. However, if we simulate a select menu using library such as jQuery UI select menu or Chosen to create a select menu instead of using <select> tag, click event will be fired on <ul> or <li> tag which is consistent in all browsers I tested.

I have another suggestion, it's not 100%, but almost:
<select onchange="valueChanged(this.value); this.selectedindex = -1">
<option style="display: none"></option>
<option value="1"> 1 </option>
<option value="2"> 2 </option>
<option value="3"> 3 </option>
<option value="4"> 4 </option>
</select>
This way the event will be triggered even if the user selected the same option twice.
The hitch is that IE will display the empty option (it ignores the style attribute), but clicking it will not fire the event, since it always starts out as being selected, and therefore selecting it does not trigger onchange...

This emulates an onclick event on your options by recording the number of clicks.
http://jsfiddle.net/yT6Y5/1/
The first click is ignored (used to expand your dropdown),
The second click is effectively your "selection". (The click count is then reset).
It doesn't cater for keyboard interaction though....
Oh and I'm making use of JQuery, but you could re-do it using pure JS

You just have to
put the script above the select,
set onclick and onblur for select as shown in code
and customize the check function.
I have tested it and it works :).
<script>
selectHandler = {
clickCount : 0,
action : function(select)
{
selectHandler.clickCount++;
if(selectHandler.clickCount%2 == 0)
{
selectedValue = select.options[select.selectedIndex].value;
selectHandler.check(selectedValue);
}
},
blur : function() // needed for proper behaviour
{
if(selectHandler.clickCount%2 != 0)
{
selectHandler.clickCount--;
}
},
check : function(value)
{
// you can customize this
alert('Changed! -> ' + value);
}
}
</script>
<select onclick="selectHandler.action(this)" onblur="selectHandler.blur()">
<option value="value-1"> 1 </option>
<option value="value-2"> 2 </option>
<option value="value-3"> 3 </option>
<option value="value-4"> 4 </option>
</select>

Use function(this) in id of select tag
for example
<script type="application/javascript">
var timesSelectClicked = 0;
$(function() {
$(document).on('click keypress', 'select', function (e) {
if (timesSelectClicked == 0)
{
timesSelectClicked += 1;
}
else if (timesSelectClicked == 1)
{
timesSelectClicked = 0;
prompt($('select option:selected').text());
}
});
});
</script>

This code is not working in Google Chrome but is working in Mozilla.
<select>
<option value="2" (click)="myFunction($event)">
<div>2</div>
</option>
<option value="5" (click)="myFunction($event)">
<div>5</div>
</option>
<option value="10" (click)="myFunction($event)">
<div>10</div>
</option>
</select>
This solition is working in Chrome and Mozilla. I didn't test in Safari.;
<select (change)="myFunction($event)">
<option value="2">
<div>2</div>
</option>
<option value="5">
<div>5</div>
</option>
<option value="10">
<div>10</div>
</option>
</select>

This works on different browsers CHROME, FIREFOX, IE, AVAST BROWSER, BRAVE, Etc... And user can change the option as many times as possible with the event still occurring over and over again.
HTML:
<select id="howtopay">
<option selected>Select</option>
<option value="1">ATM - PAYSTACK (Instant Funding)</option>
<option value="2">BANK DEPOSIT/TRANSFER</option>
</select>
JQUERY:
$(function(){
$('#howtopay').change(function() {
if ($(this).val() == "1") {
$('#fund_with_atm').show();
$('#fund_with_bank').hide();
}
else if ($(this).val() == "2") {
//Do Nothing
}
else {
//Do Nothing
}
});
});

If you want to fire onclick event only when user clicks the option use event.detail:
<select onclick="selectFunc(this.children[this.selectedIndex])">
And in your function definition:
function selectFunc(option){
//event.detail = 0 on option click across firefox, chrome, opera, edge
if(!event.detail){
//your code
}
}

I found a good workaround for those wondering.
html:
<select id="n1" onclick="n1c()">
<option id="h" value=undefined disabled selected hidden>Header</option>
<option id="o1" value="v1">one</option>
<option id="o2" value="v2">two</option>
<option id="o3" value="v3">three</option>
</select>
js:
function n1c() {
if (n1.value != undefined) {
if (n1.value == "v1"){
check1()
} else if (n1.value == "v2") {
check2()
} else if (n1.value == "v3") {
check3()
}
}
}
This allows you to run specific targeted javascript functions tailored to what you have selected. It runs both when you select the box and when you make a selection. Using the code below, you can fix/change that to fit your project.
var opt = undefined
function check1() {
if (opt == "opt1") {
console.log("already selected")
} else {
opt = "opt1";
<-- place code here -->
}
}
That's about as good as I've got. It works with both chrome/edge/safari select functionality and firefox/ie select functionality. There may be a way to compact/refine this code, but it gets the job done at least.

I found that the following worked for me - instead on using on click, use on change e.g.:
jQuery('#element select').on('change', (function() {
//your code here
}));

How do I disable certain options of 'Dropdown B' depending on an option selected on 'Dropdown A'?

Im new to this so apologies if my question is not presented as it should be.
Basically, my aim is with jQuery is to make it so that when the field called 'Apple' is selected from the first dropdown box, the second dropdown box will only allow the field 'Firm' to be selected and the other two be disabled. However if any of the other fruits other than 'Apple' is selected from the first dropdown box then all of the options in the second dropdown box (texture dropdown) will be available to be chosen.
I have looked all over the internet for jQuery code to help me with this issue but as I am new to jQuery I have difficulty finding the solution I need.
Here is my HTML code:
<div class="ingredients_div">
<select name="ingredients_form" id="ingredients_form_1">
<option value="Apple" selected="">Apple</option>
<option value="Orange">Orange</option>
<option value="Lemon">Lemon</option>
<option value="Mango">Mango</option>
</select>
</div>
<div class="texture_div">
<select name="texture_form" id="texture_form_1">
<option value="Firm" selected="">Firm</option>
<option value="Soft">Soft</option>
<option value="Blended">Blended</option>
</select>
</div>
Many thanks

please check this code , i think it works for you.
$("#select1").change(function() {
if ($(this).data('options') == undefined) {
/*Taking an array of all options-2 and kind of embedding it on the select1*/
$(this).data('options', $('#select2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html(options);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select name="select1" id="select1">
<option value="1">Apple</option>
<option value="2">Orange</option>
<option value="3">Lemon</option>
</select>
<select name="select2" id="select2">
<option value="1">Firm</option>
<option value="2">Soft</option>
<option value="3">Blended</option>
</select>

To achieve what you mentioned, you need to use jQuery's event binding on the first select box. As soon as the value is changed, you need to write logic to enable/disable options in the second select box as per the value changed in the first box.
Here is how you can achieve it.
$("#ingredients_form_1").change(function() {
if ($(this).val() === "Apple") {
$("#texture_form_1 option").prop("disabled", true);
$("#texture_form_1 option[value='Firm']").prop("disabled", false);
} else {
$("#texture_form_1 option").prop("disabled", false);
}
});
Please go through jQuery's documentation to know more about selectors, event binding, and most importantly, in the next post, include what you've achieved till then.

Button on click w/ selected value of <select> as parameter

I am new to web development and I'm trying to do this:
I have a <select> and I want the value of the selected option to be one of the parameters of a method that is called whenever a button is clicked.
So for example:
<select id="instructorSelector">
<option value='abrown#gmail.com'>Anna Brown</option>
<option value='jdoe#gmail.com'>Jane Doe</option>
...
</select>
<button onclick="sendEmail(($('#instructorSelector').val()),...,...)" type="button">Send Email</button>
The problem with this is that it doesn't seen to detect when I've actually selected someone. I'm using freemarker templates but a general response as to how I should do this would be helpful too.
Also, how could I make it so the button is not clickable (or even visible) until the user actually selects something from the <select> ?
Thanks in advance! Sorry if this is an overly simple question.

You don't need to pass anything, what you need is a proper event handler:
<select id="instructorSelector">
<option value='abrown#gmail.com'>Anna Brown</option>
<option value='jdoe#gmail.com'>Jane Doe</option>
...
</select>
<button id="btn" type="button">Send Email</button>
JS
$(function() {
$('#btn').hide();
$('#instructorSelector').on('change', function() {
$('#btn').show();
});
$('#btn').on('click', function() {
var select_value = $('#instructorSelector').val();
// use the value here
});
});

I would solve it like this:
disable the button in the beginning using the proper disabled-attribute
toggle this attribute if the value of the box changes, depending on something is selected or not
store the selectors in variables, so you don't need to re-query them all the time
HTML
<select id="instructorSelector">
<option value="">Please select</option>
<option value="abrown#gmail.com">Anna Brown</option>
<option value="jdoe#gmail.com">Jane Doe</option>
</select>
<button class="send_email" type="button" disabled="disabled">Send E-mail</button>
JavaScript
// example of a selector using a class name
var button = $('button.send_email');
// example of using a selector using the id of an element
var selector = $('#instructorSelector');
selector.change(function () {
if ('' == selector.val()) {
button.attr('disabled', 'disabled');
} else {
button.removeAttr('disabled');
}
});
button.click(function(event) {
sendEmail(selector.val());
event.preventDefault();
});
Demo
Try before buy

Try to use .chage() from jQuery http://api.jquery.com/change/ to make button visible
$('#instructorSelector').change(function () {
$('#id-of-the-button').show();
});
In this chang function you can also capture values of option $(this).val()

I highly recommend that you read jQuery Event Basics
You will need to understand how you can use selectors along with events to truly leverage the power of jQuery.
I think after reading about events you will see how click and change will greatly benefits the goals you have for your page.

Simplest Way: http://jsfiddle.net/rA4VJ/
<select id="instructorSelector">
<option value='none' selected>Choose Someone</option>
<option value='abrown#gmail.com'>Anna Brown</option>
<option value='jdoe#gmail.com'>Jane Doe</option>
</select>
<button id="btn" type="button">Send Email</button>
var btn = document.getElementById("btn");
var elm = document.getElementById("instructorSelector");
elm.onchange = function (e) {
if (elm.value != 'none') {
console.log(elm.value);
btn.removeAttribute('disabled');
} else {
btn.setAttribute('disabled', 'disabled');
}
}

If you are using JavaScript, you can have the property onchange on the select, that can trigger a method that could check the value and make visible the the button. Use an option to indicate that there is no selection, and if that is the one selected, hide the button.
<select id="instructorSelector" onchange="something()">
<option value='selectone'>Select one</option>
<option value='abrown#gmail.com'>Anna Brown</option>
<option value='jdoe#gmail.com'>Jane Doe</option>
...
</select>
<button id="button" style="display:none;" onclick="sendEmail(($('instructorSelector').val()),...,...)" type="button">Send Email</button>
function something(){
if ( $('#instructorSelector').val()!='selectone' ) {
document.getElementById("button").style.display = 'block';
}
else{
document.getElementById("button").style.display = 'none';
}
}

Internet Explorer 10 - jQuery click on select option doesn't work

I've tried to map an event jQuery event listener click(function(){//doStuff}) to an <option> element, but on click/focus, IE doesn't execute my function.
In FF and Chrome, it works perfectly. In IE10, the click option doesn't work; neither the HTML element onClick="doFunction()", nor the on.('click',...) event.
Here is the jsFiddle
<select id="someId" name="someName" size="10" multiple="yes">
<option value="ALL">--All--</option>
<option value="X1">X1</option>
<option value="X2">X2</option>
<option value="X3">X3</option>
<option value="X4">X4</option>
<option value="X5">X5</option>
<option value="X6">X6</option>
<option value="X7">X7</option>
<option value="X8">X8</option>
<option value="X9">X9</option>
</select>
$(document).ready(function () {
$('#someId option[value="ALL"]').click(function () {
$('select option').attr('selected', true);
$('select option[value="ALL"]').eq(0).attr('selected', false);
});
});

Viliam, I'm afraid I have bad news. IE10 will not really fire "click" event for option, instead it will fire it for "select" only. So what you can do is to put "click" event handler on select, track the selected value and act upon that.
Demo
$('#someId').click(function () {
if ($("#someId option:selected").eq(0).val() === 'ALL') {
$('select option').prop('selected', true);
$('select option[value="ALL"]').eq(0).prop('selected', false);
}
});

How to select option in select list using jquery

i have a form that has select element
<select name="adddisplaypage[]" id="adddisplaypage" multiple="multiple">
<option value="all" label="all">all</option>
<option value="index" label="index">index</option>
<option value="tour" label="tour">tour</option>
<option value="aboutus" label="about us">about us</option>
<option value="contactus" label="contact us">contact us</option>
<option value="destination" label="destination">destination</option>
<option value="reservation" label="reservation">reservation</option>
</select>
can anyone help me to select this option (multiple select) on click i.e the option gets selected when clicked, and deselected if selected on click.

I realized I may have misunderstood your question. Something like the following should work, though I'm not sure about browser support:
$('#adddisplaypage option').click(function(e) {
e.preventDefault();
var self = $(this);
if(self.attr('selected') == '') {
self.attr('selected', 'selected');
} else {
self.attr('selected', '');
}
});

In your click() handler, you could write something like:
$("#adddisplaypage").val("index");
That should select "index", for example.

You can pass an array to the .val() method. For instance:
$('#adddisplaypage').val(['index', 'tour']);