I've got a select box where the user selects which elements they want to see based on option 1, option 2 and option 3.
So what I'm trying to set up is have if option 1 is selected run one set of commands and if option 2 run another and so on.
I guess I just need to know how to set up the jQuery selector.
You didn't specify how the code was triggered, so here are two common ways:
$('#yourSelect').change(function() {
if ($(this).val() == 'something') {
// do this
}
if ($(this).val() == 'somethingelse') {
// do that
}
});
Note that while I used the onchange event for the select, an onclick for another element would look like this instead:
$('#somethingelse').click(function() {
if ($('#yourselect').val() == 'something') {
// do this
}
if ($('#yourselect').val() == 'somethingelse') {
// do that
}
});
<select onchange="if(this.value)window[this.value]();">
<option value="">select one...
<option value="runme1">run me 1
<option value="runme2">run me 2
</select>
<script>
function runme1() {
alert(1);
}
function runme2() {
alert(2);
}
Related
Good day,
In my code, I need to use a drop-down list that has two values, say 1 and 2. When I click the #action-link link I append the corresponding text of the value into a textarea (#main-reply). I use Jquery .change() method to determine when selected value changed. Works ok unless I switch options several times and then it starts to add multiple values at a time even though I need insert in textarea only the corresponding value.
Here is a simple snippet of the code I use:
$("#action-link").click(function() {
if ($("#option").val() == 1) {
$("#main-reply").append("One");
}
});
$("#option").change(function() {
if ($(this).val() == 2) {
$("#action-link").click(function() {
$("#main-reply").append("Two");
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="option"><option value='1' selected>One</option><option value='2'>Two</option></select>
Add Value to textarea
<br>
<textarea id="main-reply"></textarea>
How can I solve this? Thanks!
Code adds another on-click listener when the value of the option was changed to '2' Link. Therefore the append() statament was being called multiple times, one from each listener.
$("#action-link").click(function() {
var option = $("#option").val();
if (option == 1) $("#main-reply").append("One");
else if(option == 2) $("#main-reply").append("Two");
});
Most of the times, this issue occurs when you load the same js file twice.
When JS file gets loaded twice, 2 on change events will get attached to the same event. Hence the actions will happen twice
Check your code and make sure that the JS file is not loaded twice
If it's not loaded twice and somehow this issue is still occurring, then use below code
$("#option").off().on("change",function() {
if ($(this).val() == 2) {
$("#action-link").click(function() {
$("#main-reply").append("Two");
});
}
});
This will remove any events attached to the change event and then adds the function
In your code click event is added on every change event for option value 2, which is not a good way as well.
You can write code as below
$("#action-link").click(function() {
if ($("#option").val() == 1) {
$("#main-reply").append("One");
} else if ($("#option").val() == 2) {
$("#main-reply").append("Two");
}
});
$("#option").change(function() {
// Just trigger click on change which handle other stuff
$("#action-link").trigger("click);
// You can write use below code as well.
// $("#action-link").click();
});
OR you can make it very simple as below which is dynamic regardless of any option value which will adds selected option value.
$("#action-link").click(function() {
appendOptionValue($("#option").val());
});
$("#option").change(function() {
appendOptionValue($("#option").val());
});
function appendOptionValue(optionValue){
$("#main-reply").append(optionValue);
}
this is it :
var val = $("#option").val();
$("#action-link").click(function() {
$("#main-reply").append(val);
});
$("#option").change(function() {
val = $(this).val();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="option">
<option value='One' selected>One</option>
<option value='Two'>Two</option>
</select>
Add Value to textarea
<br>
<textarea id="main-reply"></textarea>
this might helpful to you. Use text() instead of append
$(document).ready(function(){
$('#action-link').click(function(event) {
if($('#option').val()==1){
$('#main-reply').text('one');
}else{
$('#main-reply').text('two');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="option"><option value='1' selected>One</option><option value='2'>Two</option></select>
Add Value to textarea
<br>
<textarea id="main-reply"></textarea>
I'm trying to have dynamic select list populate itself, from a single selection to start:
<select id="activitySelector">
<option value="addNew">Add New Item</option>
</select>
and then JavaScript code we have:
addEventListener("select", addActivityItem, false);
The problem is that various events don't fire when you have one item: not "change" because, the text is no different when you select that item; not "select" (as I have here), for a roughly similar reason, because I'm not really selecting anything because there's only one item. What is the event that should be fired here? It seems silly to list a blank item in my option list to fire the event, so I hope there is another solution. Or is that the best solution?
You need a click listener which calls addActivityItem if less than 2 options exist:
var activities = document.getElementById("activitySelector");
activities.addEventListener("click", function() {
var options = activities.querySelectorAll("option");
var count = options.length;
if(typeof(count) === "undefined" || count < 2)
{
addActivityItem();
}
});
activities.addEventListener("change", function() {
if(activities.value == "addNew")
{
addActivityItem();
}
});
function addActivityItem() {
// ... Code to add item here
}
A live demo is here on JSfiddle.
The problem is that you used the select option, this is where you went wrong. Select signifies that a textbox or textArea has a focus.
What you need to do is use change.
"Fires when a new choice is made in a select element", also used like blur when moving away from a textbox or textArea.
function start(){
document.getElementById("activitySelector").addEventListener("change", addActivityItem, false);
}
function addActivityItem(){
//option is selected
alert("yeah");
}
window.addEventListener("load", start, false);
Another way to make your code understandable is :
let selector = document.getElementById("Selector");
let result = document.getElementById("result");
// when client clicked on select element
selector.addEventListener("click", () => {
// if default value is changed
selector.addEventListener("change", () => {
// if value switched by client
switch (selector.value) {
case "add":
//do somthing with , "add" value
result.innerHTML = selector.value;
break; // then take break
case "remove":
//do somthing with , "remove" value
result.innerHTML = selector.value;
break; // then take break
}
});
});
#Selector{
margin: 1rem 0;
}
<label for"Selector">chose an option:</label>
<select id="Selector" name="Selector" >
<option value="add">Add new item</option>
<option value="remove">Remove existing item</option>
</select>
<div id="result">option selected : "The default value is first option"</div>
I have a combo box of which the HTML looks like this:
<select id="myCombo">
<option value=""></option> <!-- Not shown in jQuery UI Combobox because empty value -->
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
I've attached the jQuery UI Combobox to I as such:
$("#myCombo").combobox({
select: function () {
if ($("#myCombo").val() == "") {
//DO SOMETHING
}
else {
//DO SOMETHING ELSE
}
}
});
When I select an option by either typing and/or selecting an option, the "DO SOMETHING ELSE" part is triggered like it should, so no issue there.
However, when I clear the selection (this selects the first option of my original combo) by deleting the text or clicking the "x", nothing get's triggered, so I can't execute the "DO SOMETHING" part of my function.
How can I trigger this part? Is there maybe another event that is triggered when clearing a selection?
I have searched and found lots of topic on selecting an item, but none on clearing/deselecting something(that were answered at least).
This can be accomplished with select2.
$("#myCombo").select2({
placeholder: "Select report type",
allowClear: true,
});
$("#myCombo")
.on("select2-selecting", function(e) {
log("selecting val=" + e.val + " choice=" + JSON.stringify(e.choice));
})
.on("select2-removed", function(e) {
log("removed");
})
After looking further into it I've found a way to trigger an event when clearing the text.
For this I had to edit the original custom.combobox widget JS, provided by the example on the jQuery UI site
In this js look for the _removeIfInvalid function and edit it like so
_removeIfInvalid: function (event, ui) {
// Selected an item, nothing to do
if (ui.item) {
return;
}
// Search for a match (case-insensitive)
var value = this.input.val(),
valueLowerCase = value.toLowerCase(),
valid = false;
this.element.children("option").each(function () {
if ($(this).text().toLowerCase() === valueLowerCase) {
this.selected = valid = true;
return false;
}
});
// Found a match, nothing to do
if (valid) {
//**ADD this piece of code**
this._trigger("change", event, {
item: null
});
return;
}
// Remove invalid value
this.input
.val("")
.attr("title", value + " didn't match any item")
.tooltip("open");
this.element.val("");
this._delay(function () {
this.input.tooltip("close").attr("title", "");
}, 2500);
this.input.data("ui-autocomplete").term = "";
//**ADD this piece of code**
this._trigger("change", event, {
item: null
});
}
The added piece of code (I know it's added 2 times, but the code would otherwise jump out of the function before it was ran), will add a change event to the combobox that can be used in your own script. This change event, I can use to run any code I want when the selection is cleared.
$("#myCombo").combobox({
select: function () {
//DO SOMETHING ON SELECT
//IMPORTANT: The other function can't be triggered before the combobox loses focus!!
$(".custom-combobox-input").blur();
},
change:function () {
//DO SOMETHING ON CLEAR
}
});
The removeIfInvalid function is always called by default when an option can't be found and by adding an event to the control when this function is invoked is invoked, we finally have a place to execute our algorithmns.
Hopefully, more people are helped with this small fix.
Empty value cannot be selected in the browser. Hence select() is never called on empty contents.
If you try this, it becomes a bit more clear:
<select id="myCombo">
<option value=""></option> <!-- Not shown in jQuery UI Combobox because empty value -->
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4"></option>
<option value="5">Option 5</option>
</select>
I have slightly modified the javascript, note that I'm empty is never logged.
$("#myCombo").combobox({
select: function(event, ui) {
var idx = $("#myCombo").val();
var txt = $("#myCombo option:selected").text();
alert(idx);
if (idx === undefined) {
console.log("select: I'm empty");
} else {
console.log("select: " + idx + ": " + txt);
}
}
});
Interestingly, none of the other callbacks (search(), change(), response(), focus()) seems to function from autocomplete, so there is no way to detect a zero-ing out of the select.
I had spent what felt like a lot of time trying proposed solutions for this and those did not work for me, then I solved it myself.
Look for the _createAutocomplete function where you created your combobox instance.
Look for the chain of properties being set to this.input.
Then add
.on("focus",function(){
$(this).val('');
})
Anywhere in the chain.
So there are many examples on here of how to do this, but they are all (my opinion) cumbersome. You can clear the selection much easier by doing the following:
1) your _createAutocomplete: function() needs to have the following:
.attr( "title", "mytitle" )
Use any title that you want, or set another attribute (name, id etc)- I just happened to have a use for the title, so this worked for me.
2) whatever function you are running only needs the following to clear:
$("input[title='mytitle']").val('');
$("#combobox").val('');
(You have to clear both).
My need was a form with one of the fields being an autocomplete with minimum number of characters. There's an add entry button that submits, refreshes the entry list and resets the form line for additional entries. Much cleaner.
I have the following jQuery code for showing/hiding a conditional form field (contained within tr#other-employer). This works fine, once the page is loaded and options are changed.
I would like make it so that the conditinal field shows when the page is loaded and the option selected in the drop-down list with #employer is pre-selected (this is done with PHP).
I have tried removing $('tr#other-employer').hide(); , but then this showed the conditional field on load regardless if the drop-down field is other or not.
A simple sample page is here: http://brenda.upreach.org.uk/beta/form.php
$(document).ready(function () {
$('tr#other-employer').hide();
$('#employer').change(function () {
if ($(this).val() == "Other") {
$('tr#other-employer').fadeIn();
} else {
$('tr#other-employer').hide();
}
});
});
Any help greatly appreciated!
You can add an if condition like below to check the status of the select box and do the needful.
$(document).ready(function () {
$('tr#other-employer').hide();
/*********************************/
if($("select#employer").val() == "Other")
{ $('tr#other-employer').fadeIn(); }
/*********************************/
$('#employer').change(function () {
if ($(this).val() == "Other") {
$('tr#other-employer').fadeIn();
} else {
$('tr#other-employer').hide();
}
});
});
you can also set the select box default option from jquery using
$("select#employer").val("Other");
I'm not sure I totally understand the question, but if you're looking for the same functionality this code provides, but without the action being a requirement, then just remove the .change() function, and swap out the this for the id:
$(document).ready(function () {
$('tr#other-employer').hide();
if ($('#employer').val() == "Other") {
$('#other-employer').fadeIn();
}
});
Edit:
The above should work, given the following HTML (I've removed the table code from both to simplify the explanation):
<form>
<select id="#employer">
<option value="Foo">Foo</option>
<option value="Other" selected="selected">Other</option>
</select>
<select id="#other-employer">
<option value="Foo">Bar</option>
</select>
</form>
Given the above code the #other-employer dropdown will display only if the 'Other' option is preselected on load.
I want to prevent a select box from being changed if a certain condition applies. Doing this doesn't seem to work:
$('#my_select').bind('change', function(ev) {
if(my_condition)
{
ev.preventDefault();
return false;
}
});
I'm guessing this is because by this point the selected option has already changed.
What are other ways of doing this?
Try this:
http://jsfiddle.net/qk2Pc/
var my_condition = true;
var lastSel = $("#my_select option:selected");
$("#my_select").change(function(){
if(my_condition)
{
lastSel.prop("selected", true);
}
});
$("#my_select").click(function(){
lastSel = $("#my_select option:selected");
});
In the event someone needs a generic version of mattsven's answer (as I did), here it is:
$('select').each(function() {
$(this).data('lastSelected', $(this).find('option:selected'));
});
$('select').change(function() {
if(my_condition) {
$(this).data('lastSelected').attr('selected', true);
}
});
$('select').click(function() {
$(this).data('lastSelected', $(this).find('option:selected'));
});
If you simply want to prevent interaction with the select altogether when my_condition is true, you could always just capture the mousedown event and do your event prevent there:
var my_condition = true;
$("#my_select").mousedown(function(e){
if(my_condition)
{
e.preventDefault();
alert("Because my_condition is true, you cannot make this change.");
}
});
This will prevent any change event from ever occurring while my_condition is true.
Another option to consider is disabling it when you do not want it to be able to be changed and enabling it:
//When select should be disabled:
{
$('#my_select').attr('disabled', 'disabled');
}
//When select should not be disabled
{
$('#my_select').removeAttr('disabled');
}
Update since your comment (if I understand the functionality you want):
$("#dropdown").change(function()
{
var answer = confirm("Are you sure you want to change your selection?")
{
if(answer)
{
//Update dropdown (Perform update logic)
}
else
{
//Allow Change (Do nothing - allow change)
}
}
});
Demo
None of the answers worked well for me. The easy solution in my case was:
$("#selectToNotAllow").focus(function(e) {
$("#someOtherTextfield").focus();
});
This accomplishes clicking or tabbing to the select drop down and simply moves the focus to a different field (a nearby text input that was set to readonly) when attempting to focus on the select. May sound like silly trickery, but very effective.
You can do this without jquery...
<select onchange="event.target.selectedIndex = 0">
...
</select>
or you can do a function to check your condition
<select onchange="check(event)">
...
</select>
<script>
function check(e){
if (my_condition){
event.target.selectedIndex = 0;
}
}
</script>
I was looking for "javascript prevent select change" on Google and this question comes at first result. At the end my solution was:
const $select = document.querySelector("#your_select_id");
let lastSelectedIndex = $select.selectedIndex;
// We save the last selected index on click
$select.addEventListener("click", function () {
lastSelectedIndex = $select.selectedIndex;
});
// And then, in the change, we select it if the user does not confirm
$select.addEventListener("change", function (e) {
if (!confirm("Some question or action")) {
$select.selectedIndex = lastSelectedIndex;
return;
}
// Here do whatever you want; the user has clicked "Yes" on the confirm
// ...
});
I hope it helps to someone who is looking for this and does not have jQuery :)
You might need to use the ".live" option in jQuery since the behavior will be evaluated in real-time based on the condition you've set.
$('#my_select').live('change', function(ev) {
if(my_condition)
{
ev.preventDefault();
return false;
}
});
Implement custom readonly like eventHandler
<select id='country' data-changeable=false>
<option selected value="INDIA">India</option>
<option value="USA">United States</option>
<option value="UK">United Kingdom</option>
</select>
<script>
var lastSelected = $("#country option:selected");
$("#country").on("change", function() {
if(!$(this).data(changeable)) {
lastSelected.attr("selected", true);
}
});
$("#country").on("click", function() {
lastSelected = $("#country option:selected");
});
</script>
Demo : https://jsfiddle.net/0mvajuay/8/
This was the ONLY thing that worked for me (on Chrome Version 54.0.2840.27):
$('select').each(function() {
$(this).data('lastSelectedIndex', this.selectedIndex);
});
$('select').click(function() {
$(this).data('lastSelectedIndex', this.selectedIndex);
});
$('select[class*="select-with-confirm"]').change(function() {
if (!confirm("Do you really want to change?")) {
this.selectedIndex = $(this).data('lastSelectedIndex');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='fruits' class="select-with-confirm">
<option selected value="apples">Apples</option>
<option value="bananas">Bananas</option>
<option value="melons">Melons</option>
</select>
<select id='people'>
<option selected value="john">John</option>
<option value="jack">Jack</option>
<option value="jane">Jane</option>
</select>
This worked for me, no need to keep a lastSelected if you know the optionIndex to select.
var optionIndex = ...
$(this)[0].options[optionIndex].selected = true;
$('#my_select').bind('mousedown', function (event) {
event.preventDefault();
event.stopImmediatePropagation();
});
if anybody still interested, this solved the problem, using jQuery 3.3.1
jQuery('.class').each(function(i,v){
jQuery(v).data('lastSelected', jQuery(v).find('option:selected').val());
jQuery(v).on('change', function(){
if(!confirm('Are you sure?'))
{
var self = jQuery(this);
jQuery(this).find('option').each(function(key, value){
if(parseInt(jQuery(value).val()) === parseInt(self.data('lastSelected')))
{
jQuery(this).prop('selected', 'selected');
}
});
}
jQuery(v).data('lastSelected', jQuery(v).find('option:selected').val());
});
});
None of the other answers worked for me, here is what eventually did.
I had to track the previous selected value of the select element and store it in the data-* attribute. Then I had to use the val() method for the select box that JQuery provides. Also, I had to make sure I was using the value attribute in my options when I populated the select box.
<body>
<select id="sel">
<option value="Apple">Apple</option> <!-- Must use the value attribute on the options in order for this to work. -->
<option value="Bannana">Bannana</option>
<option value="Cherry">Cherry</option>
</select>
</body>
<script src="https://code.jquery.com/jquery-3.5.1.js" type="text/javascript" language="javascript"></script>
<script>
$(document).ready()
{
//
// Register the necessary events.
$("#sel").on("click", sel_TrackLastChange);
$("#sel").on("keydown", sel_TrackLastChange);
$("#sel").on("change", sel_Change);
$("#sel").data("lastSelected", $("#sel").val());
}
//
// Track the previously selected value when the user either clicks on or uses the keyboard to change
// the option in the select box. Store it in the select box's data-* attribute.
function sel_TrackLastChange()
{
$("#sel").data("lastSelected", $("#sel").val());
}
//
// When the option changes on the select box, ask the user if they want to change it.
function sel_Change()
{
if(!confirm("Are you sure?"))
{
//
// If the user does not want to change the selection then use JQuery's .val() method to change
// the selection back to what it was previously.
$("#sel").val($("#sel").data("lastSelected"));
}
}
</script>
I hope this can help someone else who has the same problem as I did.