CODEWITHSUNDEEP
javascripthtml
user2710234
user2710234

Reputation: 3225

Alert on select option change

I have this HTML code that shows an alert(); on option change

How can I stop it showing the alert on one of the options but keep it on all others?

<select onchange="alert();">
    <option>d</option>
    <option>de</option>
    <option>dewe</option>
    <option>dewee</option>
</select>

Upvotes: 0

Views: 13983

Answers (5)

Nope
Nope

Reputation: 22329

To add a more generic solution you could add a data attribute to the options you are interested in, update your onchange to call a custom function, passing it the event data, similar to this:

<select onchange="doSelectAlert(event);">
    <option data-no-alert>d</option>
    <option>de</option>
    <option>dewe</option>
    <option>dewee</option>
</select>

You can then interrogate the event data to only alert the options which have a specific attribute, similar to this:

function doSelectAlert(event) {
    var option = event.srcElement.children[event.srcElement.selectedIndex];
    if(option.dataset.alert !== undefined){
        alert('Hello Selection');
    }
}

Off course, if you have more options to be alerted than not you can inverse the logic and add a data attribute like data-no-alert and change the code to alert all but the options which have that attribute, similar to this:

<select onchange="doSelectAlert(event);">
    <option data-no-alert>d</option>
    <option>de</option>
    <option>dewe</option>
    <option>dewee</option>
</select>

function doSelectAlert(event) {
    var option = event.srcElement.children[event.srcElement.selectedIndex];
    if (option.dataset.noAlert !== undefined) {
        return;
    }

    alert('Hello Selection');
}

DEMO - Marking specific options for alert

DEMO - Marking specific options to not alert

Note for IE 10 and lower support:

If you need to support IE 10 or below, change the dataset query to use plain old attribute syntax instead, similar to this:

function doSelectAlert(event) {
    var option = event.srcElement.children[event.srcElement.selectedIndex];

    // element.dataset is not supported in IE 10 or below
    // use standard attribute syntax instead...
    if (option.getAttribute('data-no-alert') !== null) {
        return;
    }

    alert('Hello Selection');
}

Or use modernizr to polyfill dataset use if you want to be able to use dataset.

Upvotes: 0

tilda
tilda

Reputation: 672

This is the example when you don't want option d to raise alert:

 <select onchange="if(this.value!='d'){alert('yes');}">
                <option>d</option>
                <option>de</option>
                <option>dewe</option>
                <option>dewee</option>
            </select>

In this fiddle onchange event is modified to call custom function when event is fired.

Upvotes: 0

Deepu Sasidharan
Deepu Sasidharan

Reputation: 5309

Try this...

<script type="text/javascript">
$(document).ready(function()
{
$("select").change(function()
{
if($(this).val() != "dee")
alert($(this).val());
});
});
</script> 
</head>


<select>
<option>d</option>
<option>de</option>
<option>dee</option>
<option>deep</option>
</select>

Upvotes: 0

Sachin
Sachin

Reputation: 40970

You can simple make a handler and can put the condition like this

function alertMessage()
{
    if(document.getElementById('select').value !="d"){
        alert('yes');
    }
}

your markup would be 

<select id="select" onchange="alertMessage();">

Js Fiddle Demo

Upvotes: 4

Alex
Alex

Reputation: 11245

For example you don't need alert for second option de:

<select onchange="selectChangeHandler(this)">
    <option>d</option>
    <option>de</option>
    <option>dewe</option>
    <option>dewee</option>
</select>
<script>
    function selectChangeHandler(selectNode) {
         if (selectNode.selectedIndex !== 1) {
             alert("I'm alert option!");
         }
    }
</script>

Upvotes: 0

Related Questions