onclick handling for jQuery combo box option item - javascript

<option value='0'>Choose A Product</option>
<option id='custAddNewCategory' value='addnew' data-icon='glyphicon glyphicon-plus text-success'>Add new</option>
<option value='769'>1</option>
<option value='770'>1</option>
<option value='773'>1</option>
i have this option list generated by jquery code when the page loads.
When the second option 'add new' is clicked, i want something to be processed.
i tried following, but it fails. :(
//custAddNewCategory
$(document).on("click", 'custAddNewCategory', function(e) {
alert('add new category clicked!');
});
do advise.

You can use select change event handler as below:
$('select').on('change', function(event){
if($(this).val() == $('#custAddNewCategory').val()){
alert('add new');
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value='0'>Choose A Product</option>
<option id='custAddNewCategory' value='addnew' data-icon='glyphicon glyphicon-plus text-success'>Add new</option>
<option value='769'>1</option>
<option value='770'>1</option>
<option value='773'>1</option>
</select>

$('select').find('option').click(function (){
var valueSelected = optionSelected.val();
if(valueSelected) =="addnew"){
yourFunction();
}
});

Related

how to get event listener not to ignore if the first element in the select menu is clicked

i have tried the traditional method of addEventListener change but if i click on the first element on the list it wont respond, it only works if i click on australia then india...
HTML
<select id="country" >
<option value="india">India</option>
<option value="australia">Australia</option>
<option value="turkey">Turkey</option>
</select>
JS
var a = document.getElementById('country');
a.addEventListener('change', function() {
alert(this.value);
}, false);
You can add a default <option> like the the following:
<option selected disabled>DEFAULT</option>
Or you can use a more direct event like "click"
document.querySelector('#country').addEventListener('click', function(e) {
document.querySelector('#view').value = this.value;
});
<output id='view'></output><br>
<select id="country" >
<option value="india">India</option>
<option value="australia">Australia</option>
<option value="turkey">Turkey</option>
</select>
Its working as expected, as per 'change event' works when HTMLElement changes its value. With your 'select' element, it will not change its value when you select the same value is already selected.
You can add a default 'Select your value...' or something else you want, to prevent this behavior and accomplish what you are looking for.
HTMLElement: change event
var a = document.getElementById('country');
a.addEventListener('change', function() {
if (this.value === 'default')
return;
alert(this.value);
}, false);
<select id="country" >
<option value="default">Select country</option>
<option value="india">India</option>
<option value="australia">Australia</option>
<option value="turkey">Turkey</option>
</select>

Javascript add new select index with data from database

I want to create a selection that triggers another selection to select data from the database when the first selection is selected.
<select id="brandSelect">
<option value="10">Pilih Brand</option>
<option value="20">AMD</option>
<option value="30">Intel</option>
</select>
How to take the data from the database if option 1, 2, or 3 is selected, and the second selection option has a value in it? And if the user changes the option, the second selection index is reset.
Here's the code with Javascript Vanilla:
<body>
<select id="brandSelect" onchange="optionSelected(this.value)">
<option value="10">Pilih Brand</option>
<option value="20">AMD</option>
<option value="30">Intel</option>
</select>
</body>
<script>
function optionSelected(value) {
alert(value)
// DO Database Fetch Code Here
}
</script>
And I will tell you there is a good website, we might not need jQuery.
In the bellow Code, by changing the #brandselect you can triger change on the other select. I put specific value. You can add the value you want there.
$(document).on('change', '#brandSelect', function() {
// Here you change the selection of the other Select
$('#graphs').val("20");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="brandSelect">
<option value="10">Pilih Brand</option>
<option value="20">AMD</option>
<option value="30">Intel</option>
</select>
<select id="graphs">
<option value="10">AMD</option>
<option value="20">NVidia</option>
</select>
$(document).on('change', '#brandSelect', function() {
// Here you change the selection of the other Select
$('#brandSelect2').val("2");
$('#brandSelect2').trigger("change");
})
$(document).on('change', '#brandSelect2', function() {
// Here you change the selection of the other Select
alert();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="brandSelect">
<option value="10">Pilih Brand</option>
<option value="20">AMD</option>
<option value="30">Intel</option>
</select>
<select id="brandSelect2">
<option value="1">test1</option>
<option value="2">test2</option>
</select>
first you need to handle change event and from based on that you can handle second dropdown change event.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="brandSelect">
<option value="10">Pilih Brand</option>
<option value="20">AMD</option>
<option value="30">Intel</option>
</select>
<select id="brandSelect2">
<option value="1">test1</option>
<option value="2">test2</option>
</select>
<script>
$(document).on('change', '#brandSelect', function() {
$('#brandSelect2').val("2");
$('#brandSelect2').trigger("change");
})
$(document).on('change', '#brandSelect2', function() {
//here you can use ajax call to fetch data from database.
alert();
})
</script>

What event can I bind on an option in a select multiple?

Assuming I have a multiple select list like:
<select name="persons" id="persons" multiple size="8">
<option id="captureMe">Test option</option>
<option value="" disabled="disabled">─────────</option>
<option value="FR">Franck</option>
<option value="GE">Georges</option>
<option value="DA">David</option>
<option value="LU">Luc</option>
<option value="DO">Donald</option>
<option value="FR">FRANCOIS</option>
</select>
What event can I bind on $("#captureMe") ?
I tried some scripts like
$("#captureMe").change(function() {alert("got it!");});
$("#captureMe").on("change", function() {alert("got it!");});
$("#persons").on("change", "#captureMe", function() {alert("got it!");});
But none of these works nor with the click event.
So my question is, what event can I bind to an option in a select multiple ?
I don't wont the event being fired from the select but from the option by itself
(The goal could be firing an ajax call when a specific option is changed)
You can use click event instead of change:
$("#captureMe").on('click', function(){
console.log("got it!");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="persons" id="persons" multiple size="8">
<option id="captureMe">Test option</option>
<option value="" disabled="disabled">─────────</option>
<option value="FR">Franck</option>
<option value="GE">Georges</option>
<option value="DA">David</option>
<option value="LU">Luc</option>
<option value="DO">Donald</option>
<option value="FR">FRANCOIS</option>
</select>
Please, take a look to the following code:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<select name="persons" id="persons" multiple size="8">
<option id="captureMe">Test option</option>
<option value="" disabled="disabled">─────────</option>
<option value="FR">Franck</option>
<option value="GE">Georges</option>
<option value="DA">David</option>
<option value="LU">Luc</option>
<option value="DO">Donald</option>
<option value="FR">FRANCOIS</option>
</select>
</body>
<script>
$("#persons").change(function() {
var values = $("#persons").val();
if($.inArray($("#captureMe").val(), values) > -1){
if(!$("#captureMe").prop("isSelected")){
$("#captureMe").prop("isSelected", true);
console.log("'caputreMe' is selected");
}
}else{
if($("#captureMe").prop("isSelected")){
$("#captureMe").prop("isSelected", false);
console.log("'caputreMe' is unselected");
}
}
});
</script>
</html>
I hope it helps you. Bye.
$(document).on("change", "#persons", function() {alert("got it!");});
You can for example use the :selected selector, see https://api.jquery.com/selected-selector/
$("select").change(function() {
$("#captured-by-id:selected").each(function() {
alert($(this).text());
});
});
Here's a Fiddle.
isn't it possible to make it work in following way?
var selectedValue = "";
$("#persons").change(function() {
var values = $(this).val();
if()// condition to check if #captureme option is present in "selectedValue" variable
{
// logic
}
else if() // condition to check if #captureme was not present in "selectedValue" before and is selected now
{
// logic
}
selectedValue = value;
});

select optionlist jquery function

<select id="RB_0_field_select_0">
<option value="">Select a Field</option>
<option value="Audit">Audit</option>
<option value="Author">Author</option>
<option value="Barcode">Barcode</option>
<option value="Category">Category</option>
<option value="DocType">Content Type</option>
</select>
<script type="javascript">
$('select[id="RB_0_field_select_0"]').change(function(){
alert("hello");
alert($(this).val());
alert($( "#RB_0_field_select_0 option:selected" ).text());
});
</script>
I want to print the value selected in option list but its not working.
How to do this?
Your code is working, you just need to include jquery on top:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Here is a demo, I did not change anything in your code, i just added jquery
$('select[id="RB_0_field_select_0"]').change(function() {
alert("hello");
alert($(this).val());
alert($("#RB_0_field_select_0 option:selected").text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="RB_0_field_select_0">
<option value="">Select a Field</option>
<option value="Audit">Audit</option>
<option value="Author">Author</option>
<option value="Barcode">Barcode</option>
<option value="Category">Category</option>
<option value="DocType">Content Type</option>
</select>
OR
Maybe your script runs before the document is loaded, if that is the case, do this:
$( document ).ready(function() {
$('select[id="RB_0_field_select_0"]').change(function() {
alert($(this).val());
});
});
If it doesn't alert even "hello" it means that you are binding event before DOM is loaded - so you don't attach event handler at all to anything. Try to do it on DOMContentLoaded event:
$(function() {
$("#RB_0_field_select_0").change(function () {
$(this).val();
});
});
Try
this.options[this.selectedIndex].value;
or
$(this).options[$(this).selectedIndex].value;

Select box option based on text box value

Below is my code which change select option based on text box value but I want to change value of select option without click on "Select Now" button. Means select option change directly from text box value, button is not needed to do same.
<select name="sel" id="MySelect">
<option value="">Select One</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
</select><br><br>
Select By Text: <br>
<input type="text" name="selText" value="Six">
<input type="button" name="selectNow" value="Select Now">
$(function() {
$('input[name=selectNow]').on('click', function(event) {
selectByText($.trim($('input[name=selText]').val()));
}).click();
});
function selectByText(txt) {
$('#MySelect option')
.filter(function() {
return $.trim($(this).text()) == txt;
})
.attr('selected', true);
}
The logic is the same, except you need to hook to the keyup event on the selText element:
$('input[name=selText]').on('keyup', function() {
selectByText($.trim($(this).val()));
});
Example fiddle
Just change the event to be raised when the value of selText changes:
$('input[name=selText]').on('change', function(event) {
selectByText($.trim(this.value));
}).change();
See Fiddle

Categories