We Keep Coding

jquery function not working while search filtering html select option [duplicate]

given:
<select id="mySelect">
<option>..</option>
...
</select>
Using the select id, how can I trigger a click event on one of the options? I tried attaching the event directly to the select, but this triggers an event whenever the select is clicked on (even if there are no options). Oh, and it is a multi-select (although I don't think that matter).

You want the 'change' event handler, instead of 'click'.
$('#mySelect').change(function(){
var value = $(this).val();
});

$('#mySelect').on('change', function() {
var value = $(this).val();
alert(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<select id="mySelect">
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
</select>
EXAMPLE

you can attach a focus event to select
$('#select_id').focus(function() {
console.log('Handler for .focus() called.');
});

The problem that I had with the change handler was that it triggered on every keypress that I scrolled up and down the <select>.
I wanted to get the event for whenever an option was clicked or when enter was pressed on the desired option. This is how I ended up doing it:
let blockChange = false;
$element.keydown(function (e) {
const keycode = (e.keyCode ? e.keyCode : e.which);
// prevents select opening when enter is pressed
if (keycode === 13) {
e.preventDefault();
}
// lets the change event know that these keypresses are to be ignored
if([38, 40].indexOf(keycode) > -1){
blockChange = true;
}
});
$element.keyup(function(e) {
const keycode = (e.keyCode ? e.keyCode : e.which);
// handle enter press
if(keycode === 13) {
doSomething();
}
});
$element.change(function(e) {
// this effective handles the click only as preventDefault was used on enter
if(!blockChange) {
doSomething();
}
blockChange = false;
});

You can also try this to get previous value of select and the clicked value.
HTML
<select name="status">
<option value="confirmed">confirmed</option>
<option value="packed">packed</option>
<option value="shiped">shiped</option>
<option value="delivered">delivered</option>
</select>
script
var previous;
$("select[name=status]").focus(function () {
previous = this.value;
}).change(function() {
var next = $(this).val()
alert("previous: "+previous+ " and Next: "+ next)
previous = this.value;
});

<select name="data" id = 'cohort' class="form-control" style = "width:215px; margin-left:20px; margin-bottom:8px ; height:30px" >
<option value = 0>All</option>
<option value = 1>Diseases</option>
<option value = 2>Drugs</option>
<option value = 3>Procedures</option>
</select>
const element = document.getElementById("cohort");
const event = new MouseEvent("mousedown");
element.dispatchEvent(event);

What I have done in this situation is that I put in the option elements OnClick event like this:
<option onClick="something();">Option Name</option>
Then just create a script function like this:
function something(){
alert("Hello");
}
UPDATE:
Unfortunately I can't comment so I'm updating here
TrueBlueAussie apparently jsfiddle is having some issues, check here if it works or not: http://js.do/code/klm

its working for me
<select name="" id="select">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
</select>
<script>
$("#select > option").on("click", function () {
alert(1)
})
</script>

One possible solution is to add a class to every option
<select name="export_type" id="export_type">
<option class="export_option" value="pdf">PDF</option>
<option class="export_option" value="xlsx">Excel</option>
<option class="export_option" value="docx">DocX</option>
</select>
and then use the click handler for this class
$(document).ready(function () {
$(".export_option").click(function (e) {
//alert('click');
});
});
UPDATE: it looks like the code works in FF, IE and Opera but not in Chrome.
Looking at the specs http://www.w3.org/TR/html401/interact/forms.html#h-17.6 I would say it's a bug in Chrome.

Redirect After Selecting dropdown Values

I am creating a website on github pages so i want user to be directed on fixed page after he choose the final option. I am getting data from JSON file. I also tried to insert tag to JSON but it is not directing when you click on option edited. The page is here vaidicbooks.cf/test.html

You should add onchange handler for city like -
$(document).on('change', '#state', function(){
var state_id = $(this).val();
if(state_id != '')
{
load_json_data('city', state_id);
}
else
{
$('#city').html('<option value="">Select city</option>');
}
});
$(document).on('change', '#city', () => {
var country = $("#country").val();
var state = $("#state").val();
var city = $("#city").val();
window.location.href = `${country}/${state}/${city}.html`;
});
and remove HTML onchange handler like -
<select name="city" id="city" class="form-control input-lg">
<option value="">Select city</option>
</select>

Combine input and select input/change

I have two input fields and two select fields.
I do some frontend validation on input of the input fields and when I change the select of the select fields ... for ALL fields.
The only way I get this to work is if I split it like this:
var is_currencyBilling;
var is_countryBilling;
var is_cityBilling;
var is_postalBilling;
$('#cityBilling,#postalBilling').on('input', function () {
...
});
$('#currencyBilling,#countryBilling').on('change', function () {
...
});
Is there any way to combine this? Or do I have to split it like above?
Edit:
If I combine it in a change like this:
$('#cityBilling,#postalBilling,#currencyBilling,#countryBilling').on('change', function () {
console.log('Test');
...
});
... it works after I tab to another input field or a input field looses focus. But is there any chance to keep the former validation behaviour right when I 'change' the value of an input field?

You can use same change event for all or use multiple events like $(selectors).on('change input', validate)
But you can also listen for different events that use the same event handler.
Within that handler your business logic can adapt to the event type or element type or whatever other special conditions you need
Basic example
$('input:text').on('input', validate);
$('input:checkbox').on('click', validate)
$('select').on('change', validate);
function validate(evt) {
console.clear()
var $el = $(this),
val = $el.val();
console.log(evt.type + ' event on: ' + this.name + ', new value is: ', val);
if ($el.is('input:text')) {
console.log('This is an input:text');
} else if ($el.is('select')) {
console.log('This is a select');
}else if ($el.is('input:checkbox')) {
console.log('Checkbox is checked = ', this.checked)
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Inp1: <input name="input_one" type="text" /> Inp2: <input name="input_two" type="text" /> <br><br>
Check<input name="check_one" value="one" type="checkbox">
<br><br>
Sel 1
<select name="sel_one">
<option></option>
<option value="1">one</option>
<option value="2">two</option>
</select>
Sel 2
<select name="sel_two">
<option></option>
<option value="1">one</option>
<option value="2">two</option>
</select>

Adding to a HTML text field by clicking items in a multiple select box

I'm wondering if it is possible that when I click on an item in a multiple select box in HTML that it goes into another form box? Basically, when I click on something I want that text to go into a form. I've tried searching, but nothing seems to have an answer.
<form name="input" method="post" action="#">
Display Tag:<input type="text" name="taginput">
<input type="submit" value="Go">
<select name="tags" multiple>
<option value="C#">C#</option>
<option value="Java">Java</option>
<option value="Javascript">Javascript</option>
<option value="PHP">PHP</option>
<option value="Android">Android</option>
<option value="jQuery">jQuery</option>
<option value="C++">C++</option>
<option value="Python">Python</option>
<option value="HTML">HTML</option>
<option value="MySQL">MySQL</option>
</form>
To give an example, when I click on the Java option, I want Java to go into the input box called taginput. If I then click on the Python option, I want Java Python. Is this possible?

This will work, with plain javascript:
var sel = document.getElementsByName ('tags')[0];
sel.onclick = function () {
document.getElementsByName ('taginput')[0].value = this.value;
}
Demo here
A second version avoiding duplicates:
var sel = document.getElementsByName('tags')[0];
var choosen = [];
sel.onclick = function () {
var is_there = !!~choosen.indexOf(this.value);
if(is_there){return false;};
choosen.push(this.value);
document.getElementsByName('taginput')[0].value += this.value + ' ';
}
Demo here

You can do this, it finds the selected options, creates an array of text, then adds it to the text input.
$("select[name=tags]").change(function() {
var arrSelected = $(this).find("option:selected").map(function() {
return $(this).text();
}).get();
$("input[name=taginput]").val(arrSelected);
});
Demo: http://jsfiddle.net/SyAN6/

You can see this fiddle :
http://jsfiddle.net/ppSv4/
$('select option').on('click',function(){
$('#texthere').val( $(this).attr('value') );
});

You can do this using jquery, simply by checking for a change in the multi select box and then adding the newly changed data to the input field.
You can also the jsFiddle http://jsfiddle.net/eUDRV/85/
$("#values").change(function () {
var selectedItem = $("#values option:selected");
$("#txtRight").val( $("#txtRight").val() + selectedItem.text());
});

Change value of form input based on check box click

I have a form with validation, but im looking for a way to allow a check box to force a value for a form field so the validation will not see it as blank once the check box is clicked.
I currently have:
if (document.drop_list.Make.value == "")
{
message = message + "Make is missing\n";
valid = false;
}
I also have a check box, with this function:
// add event handler to checkbox
element.addEventListener('change', function() {
// inside here, this refers to the checkbox that just got changed
textbox = document.getElementById('textbox_1');
textbox.disabled = this.checked;
Can I add something to that function to force a value for:
<SELECT class="enteredMake" onchange=SelectModel(); name=Make id="textbox_2">
<OPTION selected value="">Vehicle Make</OPTION>
</SELECT>
This way, it wont be blank, it would be, say "Checked"
allowing the validation to pass?

So are you looking for something that will set the value of a select box once a checkbox has been ticked? For example:
selectbox = document.getElementById('myselectbox');
checkbox = document.getElementById('mycheckbox');
checkbox.addEventListener('change', function() {
selectbox.value = "1"
});
HTML:
<input type="checkbox" id="mycheckbox" />
<select id="myselectbox">
<option value="-1">Please select...</option>
<option value="1">1</option>
</select>
JSFiddle