Alert when a particular value from dropdown is selected - javascript

I have a Dropdown(select) in a website that is not controlled by me.But it can be modified by javascript,html,jquery..etc(they have provided web applet for doing so)
This dropdown can be identified an ID 'Zdd_1'. All i want if the user selects "Yes" in the dropdown then only then an alert should come. W hen the user navigates to the page. the dropdown might be Yes or some other value, but i dont care then.
I need this alert only when the state of the drop down changes from any value to "YES". I am not much into jquery and ajax, so if this can be done done simply( mean just using javascript)it would be great.

It can be easly done with the help of jQuery.
$('#Zdd_1').change(function(){
if($(this).val() === 'yes')
alert("Hi, I'm alert!");
});
where Zdd_1 be the id for the select element.
If you want, of course you can use only javascript.
Javascript:
function selectChange(element) {
if (element.options[element.selectedIndex].value == 'Yes')
alert("Hi, I'm alert!");
}
Html:
<select id="Zdd_1" onchange="selectChange(this)">
<option value="Maybe">Maybe</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>

Try this
var dropdown = document.getElementById("Zdd_1");
dropdown.onchange = function(event){
if(dropdown.value=="Yes"){
alert("Your message")
}
}
or check here working demo

On change of dropdown, you can check whether the changed value is "Yes" or not, if it is Yes then alert the text you want.
Try this
Html
<select onchange="changeddl(this)">
<option value="Maybe">Maybe</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
javascript
function changeddl($this)
{
if($this.value=="Yes")
{
alert("Whatever you want to alert!");
}
}
You can check the fiddle here

Try something like this:
Demo
You can also call a function on onchange event.

Related

click specific option using javascript or jquery

I tried googling this but I am getting only on event trigger searches instead of what I am looking for.
I want to dynamically click on any of the options in the select dropdown by using the value or the text if possible.
HTML
<select id="certainspamselectid" name="certainspamselect" style="margin-left: 165px;">
<option value="0">permanently deleted</option>
<option value="4">moved to admin quarantine</option>
<option value="1">moved to junk email folder</option>
<option value="5">delivered to inbox with tag</option>
<option value="2">delivered to inbox</option>
</select>
I am not sure if I need to use something with $("#certainspamselectid").click..... but I am not sure what to use after click. I would have tried more things but my google searches keep pinpointing me for on event triggers when I just want to click on one of these options using either JS or jQuery.
I have read your problem and honestly, I can't understand what you want exactly.
However, it looks like you want to select some certain option of the select dropdown.
If that's right, you don't need to call some kind of click function.
You can do it easily with jQuery.
For example, imagine that you are going to select third option - "moved to junk email folder". Then you can select it by code like below.
$("#certainspamselectid").val(1);
If my answer is not enough for you, let me know detail of your problem.
With <select> what you need is .change instead of .click
Here is a quick example .. change the $value and check again
$("#certainspamselectid").on('change' , function(){
console.log("Value Changed To: "+$(this).val());
if($(this).val() == 5){
console.log("value 5 is selected");
}
});
let $value = 4;
$("#certainspamselectid").val($value).change();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="certainspamselectid" name="certainspamselect" style="margin-left: 165px;">
<option value="0">permanently deleted</option>
<option value="4">moved to admin quarantine</option>
<option value="1">moved to junk email folder</option>
<option value="5">delivered to inbox with tag</option>
<option value="2">delivered to inbox</option>
</select>
why don't you simply change the value of the select like this
$("#certainspamselectid").val(4)
It will automatically show the text from the selected option
I don't think that clicking on an option would help you

How to alert the selected option using javascript or jquery?

I am using a select tag in my code, here is my code,
<select onchange="test(this);">
<option value="0">Select</option>
<option value="1">Select1</option>
<option value="2">Select2</option>
<option value="3">Select3</option>
</select>
and javascript code is here,
<script>
function test(obj)
{
alert($(obj).val());
}
</script>
I want to alert the selected text here, If I use the above code the value of the selected option is coming, but I want to alert the text of the selected option can anyone tell to achive this one.
I want to alert it without using any class or id.
I want to alert it only through the obj.
I am waiting for your help.
Thanks In advance
This should do the trick...
alert($(obj).find("option:selected").text());
That uses the jQuery object $(obj), like you already had, but does a find() which searches the child elements, in this case the selected option.
jQuery find()
:selected pseudo-selector
Try this..
alert($(obj).find("option:selected").text());
you can try this:
alert($(obj).find('option').eq(obj.value).text());
Working jsFiddle
<select id="someid" onchange="test();">
<option value="0">Select</option>
<option value="1">Select1</option>
<option value="2">Select2</option>
<option value="3">Select3</option>
</select>
javascript>
function test(){
var elem = document.getElementById("someid"),
var selectedNode = elem.options[elem.selectedIndex].text;
alert(selectedNode );
}
jQuery>
$("#someid").change(){
alert($(this).find("option:selected").text());
}

Get value of selectbox option without using .change()

I have a selectbox as follows:
<select id="select_search">
<option value="search_contact">Contact</option>
<option value="search_customer">Customer</option>
<option value="search_employee">Employee</option>
<option value="search_servEmp">Service Employee</option>
<option value="search_servOrg">Service Org</option>
</select>
The above selectbox is part of a search form. When you submit the form, using an ajax request the results are returned to same page asynchronously.
On my results page (the one loaded asynchronously), I have a grouping of other select boxes that act as filters for the results.
<select id="select_customer">
<option value="">something</option>
</select>
<select id="select_contact">
<option value="">something else</option>
</select>
etc....
How can I get the value of the original selectbox (#select_search) to show/hide the appropriate selectboxes that were loaded via ajax. (eg. if search_contact was the selected option, only show the select box with id="search_contact")
The only way I'm familiar with is to get the value of the select box on change, but in this case the affected elements will not be loaded until after the change occurs.
You can Try this in jsFiddle .
$(function () {
$(document).on('change', '#select_search', function () {
$('select:not(#select_search)').addClass('invisble');
var selectSearchVal = $(this).find('option:selected').val();
$('#select_' + selectSearchVal.replace('search_', '')).removeClass('invisble');
});
});
If you're using JQuery $(#select_search).val() should do the trick.
The new way to make a $.live
$(document).on('change', '#select_search', function() {
// change
});

Change text inside dynamic div when on select change is made jquery

I have a title for my drop down that is dynamically given and I can currently change it when the page loads. But once I select an item from the drop down it changes back. I am looking for a simple jquery js solution that can help keep the name when an item is selected.
I need to change the text in: #shippingStateSpan from Destination State -> Destination Province and leave that way even after something is selected.
Here is my html:
<div class="shippingStateDiv">
<span id="shippingStateSpan">Destination State<br />
</span>
<select name="shippingState" id="shippingState" class="shippingDropDown"
onchange="ApplyTaxRate(this.value,4040828,1,1,0);">
<option value="-1" selected="selected">Please Select</option>
<option value="129654">AB</option>
<option value="129653">BC</option>
<option value="129652">MB</option>
<option value="129647">NB</option>
</select>
</div>
Here is my js I use to make the change on initially (But it changes back after I select something) I assume a jquery .on function may be possible but I an not sure how to do it. Thanks for the help.
<script type="text/javascript">
$("#shippingStateSpan").text("Destination Province");
</script>
Try this:
$(document).ready(function(){
var $select = $('#shippingState'),
$span = $('#shippingStateSpan');
$select.on('change', function(){
$span.html('Destination Province');
});
});
Try this
​$(function() {
$('#shippingState').on('change', function() {
$('#shippingStateSpan').text('Destination Province')
});
});​
Check out the working example here http://jsfiddle.net/sushanth009/zp7bA/

Access Dropdown Box Value When changed via JQuery

Hey, can you help me figure this out? I need to hide/show a div based on a dropdown box (the dropdown box only has a name, no id). If the value of the dropdown box is 2, it needs to be shown and for anything else it needs to be hidden. Here is what I have so far, but it doesn't seem to work (I tried using similar code on a checkbox and it worked fine, so obviously i'm missing something). (It's not possible to modify the dropdown box's code)
JavaScript
$(document).ready(function() {
$('#addons').hide();
$("input[name='configoption[1]']").change(function() {
if($(this).val() != 2) {
$('#addons').hide();
} else
$('#addons').show();
} );
});
});
HTML
<select name="configoption[1]">
<option value="1" selected="selected">Test 1</option>
<option value="2">Test 2</option>
</select>
<div id="addons">
Hi
</div>
It seems you just simply specified the wrong element name, input should be select.
$("select[name='configoption[1]']")
make sure you are getting the element by doing this:
alert( $("select[name='configoption[1]']").length )
it should be anything other than 0.
Use an onchange option. Change
<select name="configoption[1]">
to
<select name="configoption[1]" onchange="javascript:function;">

Categories

Resources