We Keep Coding

How to trigger click event on select element? (not change)

In the following code when I change the selection, there will be an alert. I am trying to make the function like when I click on the option then it will show an alert.
$(document).ready(function() {
$("#x").change(function() {
alert("Haha");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="x">
<option selected>A</option>
<option>B</option>
<option>C</option>
</select>
In the below code there is no effect when I click on the options already selected options. for example a is selected then i click a is no effect.
$(document).ready(function() {
$("#x").on("option", "click", function() {
alert("Haha");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="x">
<option selected>A</option>
<option>B</option>
<option>C</option>
</select>
because i want to trigger event while i re-clicking the selected option.
click selection box->drop menu->click selected option->trigger event
Can anyone help me?

"click selection box->drop menu->click selected option->trigger event"
First of all do not use alert(), it prompts for an extra click you really don't need to waste your time on. Use console.log().
The following demo:
Delegates the click event to select#x:
$('#x').on('click',...
Once clicked, it will trigger a focus event on every even click✱:
✱ if (cnt % 2 === 0) { $(this).trigger('focus');}
select#x is also delegated to the focus event and will call optionTrigger():
$('#x').on('focus', optionTrigger);
function optionTrigger() will log the selected <option> index and text:
✱ if (cnt < 2) {...
...$(this).trigger('blur'); }
var idx = $(this)[0].selectedIndex;
var txt = $(this).find('option').eq(idx).text();
Demo
var cnt = 1;
$("#x").on("click", function(e) {
if (cnt % 2 === 0) {
$(this).trigger('focus');
}
cnt++;
});
$('#x').on('focus', optionTrigger);
function optionTrigger(e) {
if (cnt < 2) {
$(this).trigger('blur');
} else {
var idx = $(this)[0].selectedIndex;
var txt = $(this).find('option').eq(idx).text();
console.log(idx + ': ' + txt);
}
}
<select id="x">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Have you tried bind with select e.g.:
$('#x').bind('click', function(){
console.log('Clicked')
});
If this doesn't work do tell. Thanks
Hope this helps.

Do you need to execute your code while clicking on Dropdown???
If Yes, here is the code for you
https://jsfiddle.net/shoesheill/gjLyxo5d/6/
If not please leave a comment along with your requirements.
$(document).ready(function() {
$("#x").off().on('click',function() {
alert("Haha");
});
});

Select onchange with keyboard - do not trigger onchange event until focusout?

I have a select that is bound to a change event so that it will take the user to a new page when a selection is made. It's fine with the mouse, but when I try to make a selection using my keyboard's arrow keys, the change event fires as soon as I press the arrow rather than waiting for me to tab out, so I can only ever select the first option with my keyboard.
$selectLocation.on('change', function() {
location.href = '/data#' + $(this).val().toUpperCase();
});
How can I differentiate between a click and a keypress on my change function, or otherwise make the change function not fire on keypress?

Consider the following snippet:
// Sets the redirect based on user activity on #test.
$('#test').on('change', function(e) {
if ($(this).data('clicked')) {
// A click was used to change the select box, redirect.
console.log('clicked redirect');
}
});
// Sets data-keypressed on #test when the down or up arrow key is pressed.
$('#test').on('keydown', function(e) {
var code = e.keyCode || e.which;
if (code === 38 || code === 40) {
// Reset data-clicked.
$(this).data('clicked', false);
// Bind focusout to the redirect.
$('#test').unbind('focusout').bind('focusout', function(e) {
if ($(this).val !== '') {
// An option is selected.
console.log('keyboard focusout redirect');
}
});
}
});
// Sets data-clicked on #test.
$('#test').on('click', function(e) {
// Unbind the focusout event added in the change handler.
$(this).unbind('focusout');
// Set data-clicked to be used in the change handler.
$(this).data('clicked', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="test" data-clicked="false">
<option value="">-- Select an Option --</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
This snippet uses the HTML data attribute to set whether or not the select box was changed with a click, and sets the focusout event on the select box when the select box was changed on keypress. The redirect will occur immediately on click selection, but when using the keyboard will only occur when the select box is focused out and a value is selected.

As selection causes (in your case) navigation, the simplest solution is to avoid change event. Instead save initial value and compare against current when clicked or blured.
var defaultValue = $('#select').val();
$('#select').focus();
$('#select').on('click blur', function(event) {
if (defaultValue === $(this).val()) {
return
}
// no need to save with location.href
defaultValue = $(this).val()
console.log($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="option" id="select">
<option value="1">1</option>
<option value="2">2</option>
</select>

detect if html select dropdown is in dropdown selected state

I have HTML drop-downs;
Coded in the below format:
<select name="State" id="State" class="required"/>
<option value="">--Select State--</option>
<option value="AK">Alaska</option>
</select>
I have an error background image that appends to the <select> tag on error. But I would like to remove the background image, once the user has used the drop-down and has currently selected an available option.
So, when the drop down is open and any item is selected via <option> tag hide background image. I don't need help with hiding the background image per se'. Just the logic of detecting when an option has been selected.
I have tried starting with this logic
$('option:selected').css('background', 'none !important');
Here's the caveat you guys may be missing; if there is a scenario when the user toggles back to the default start state - eg in this case 'Select a State' this background image must reappear / restore.

Add a change event on the State dropdown. So whenever the value is not empty, it will hide the error message.
$('#State').change(function() {
if(this.value !== '') {
//hide error
console.log('hide');
} else {
//show error
console.log('show');
}
});

I didn't use an image but its the same idea. I see you are applying styling directly to the element. I would recommend just using a class to apply the image and removing the class when you don't need the image any more:
Fiddle: http://jsfiddle.net/AtheistP3ace/oLrckqzj/
HTML:
<select name="State" id="State" class="required">
<option value="">--Select State--</option>
<option value="AK">Alaska</option>
</select>
JS:
var select = document.getElementById('State');
select.addEventListener('change',
function () {
if (this.value != '') {
this.classList.remove('required');
}
else {
this.classList.add('required');
}
}
);
Also you had this
<select name="State" id="State" class="required"/>
Which should be:
<select name="State" id="State" class="required">
And with jQuery: http://jsfiddle.net/AtheistP3ace/oLrckqzj/1/
var $select = $('#State');
$select.on('change',
function () {
var $this = $(this);
if ($this.val() != '') {
$this.removeClass('required');
}
else {
$this.addClass('required');
}
}
);

This will be fired when an option has been selected, assuming it is different from the currently selected option. It will not fire when the select menu is opened, though. You can probably use on 'click' for that.
$('select').on('change', function (e) {
console.log("changed: ", this, e);
});

To detect whether an option is selected or not, you can do the following:
$('select').change(function()
{
if($(this)[0].selectedIndex == 0 && $(this).val() == "") // check if value is empty and index of the selected option is not zero.
alert("not selected");
else
alert("selected");
});
Example : http://jsfiddle.net/WTkqn/300/

How to stop a select menu form opening or changing?

$('#selectmenu').on('keyup focus mousedown', function(e) {
e.preventDefault();
});
but when it is selected by pressing tab i can change the value by pressing up & down key.how to stop it?

Block the tab key.
$('/*The Previous Input */').on('keydown', function(e) {
if (e.keyCode == 9) {
e.preventDefault();
}
});
I don't have your HTML, so i can't test or integrate the code.
You also can use disabled="disabled", i think is a better solution.

You use off() or unbind() methods of jQuery:
<select id="dropDown" name="dropDown" style="margin-top: 5px; width: 150px;">
<option value="select">Select </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="All">All </option>
</select>
<button id="stopChange" >Stop</button>
<button id="StartChange" >Start</button>
jQuery code:
$("#stopChange").click(function () {
$("#parSelCategor").unbind("change");
});
$("#StartChange").click(function () {
$("#parSelCategor").bind("change");
});

You may listen you a more global event like 'onchange' and change the value back to the previous one when the event trigger.
Disabling the select may work too.
Edit : 'keydown' seems like a good idea too.

you can change the tabindex of the select box
$('#selectmenu').attr('tabindex', -1).on('keyup focus mousedown', function (e) {
e.preventDefault();
});
or best way is just disable the control
$('#selectmenu').attr("disabled", true);
Demo

Here's a solution that simply forces the selection to stay the same if some variable (stopChange) is true.
JS (jQuery):
var stopChange = true;
var opt = $('option:selected');
$('#selectmenu').on('change', function () {
if (stopChange) {
opt.attr('selected', true);
}
});
Here's a fiddle.

Detect when a specific <option> is selected with jQuery

I'd like jQuery to detect when the option with the id trade_buy_max is selected.
$(document).ready(function() {
$("option#trade_buy_max").select(function () {
//do something
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<select name='type' id='type'>
<option id='trade_buy' value='1' selected='selected'>Buy</option>
<option id='trade_buy_max' value='1'>Buy max</option>
<option id='trade_sell' value='2'>Sell</option>
<option id='trade_sell_max' value='2'>Sell max</option>
</select>
I've tried the following, but it doesn't seem to work.
Any ideas?

This works...
Listen for the change event on the select box to fire and once it does then just pull the id attribute of the selected option.
$("#type").change(function(){
var id = $(this).find("option:selected").attr("id");
switch (id){
case "trade_buy_max":
// do something here
break;
}
});

What you need to do is add an onchange handler to the select:
$('#type').change(function(){
if($(this).val() == 2){
/* Do Something */
}
});

you can bind change event on its select instead, then check if option selected
$("select#type").change(function () {
if( $("option#trade_buy_max:selected").length )
{
// do something here
}
});

$("option#trade_buy_max").change(function () {
opt = $(this).children("option:selected").attr('id');
if(opt == '#trade_sell_max'){
// do stuff
}
});
Untested, but that should work.

Use the change event and get the id attribute of the selected option:
$('#type').change(function () {
var selectedId = $('option:selected', this).attr('id');
if (selectedId == "trade_buy_max") {
// do something
}
});

Change .select to .change and put space before #