How to get alert and value when click on option from select tag using jQuery method

up vote
-1
down vote

favorite

I have select tag with multiple options so when I click on particular option by using its class name I want alert box and value should get but using only click event not using onChange event in jQuery script

$('.clk-option').on('click', function () {

  alert();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>

  <option value="value1">value1</option>

  <option class="clk-option" value="value2">value2</option>

</select>

edited Nov 11 at 14:01

Shiladitya

9,39391830

asked Nov 11 at 13:47

MSP

257

add a comment |

up vote
-1
down vote

favorite

$('.clk-option').on('click', function () {

  alert();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>

  <option value="value1">value1</option>

  <option class="clk-option" value="value2">value2</option>

</select>

edited Nov 11 at 14:01

Shiladitya

9,39391830

asked Nov 11 at 13:47

MSP

257

add a comment |

up vote
-1
down vote

favorite

$('.clk-option').on('click', function () {

  alert();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>

  <option value="value1">value1</option>

  <option class="clk-option" value="value2">value2</option>

</select>

edited Nov 11 at 14:01

Shiladitya

9,39391830

asked Nov 11 at 13:47

MSP

257

$('.clk-option').on('click', function () {

  alert();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>

  <option value="value1">value1</option>

  <option class="clk-option" value="value2">value2</option>

</select>

$('.clk-option').on('click', function () {

  alert();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>

  <option value="value1">value1</option>

  <option class="clk-option" value="value2">value2</option>

</select>

$('.clk-option').on('click', function () {

  alert();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>

  <option value="value1">value1</option>

  <option class="clk-option" value="value2">value2</option>

</select>

jquery

edited Nov 11 at 14:01

Shiladitya

9,39391830

asked Nov 11 at 13:47

MSP

257

edited Nov 11 at 14:01

Shiladitya

9,39391830

asked Nov 11 at 13:47

MSP

257

edited Nov 11 at 14:01

Shiladitya

9,39391830

edited Nov 11 at 14:01

Shiladitya

9,39391830

edited Nov 11 at 14:01

Shiladitya

9,39391830

asked Nov 11 at 13:47

MSP

257

asked Nov 11 at 13:47

MSP

257

asked Nov 11 at 13:47

MSP

257

add a comment |

3 Answers
3

active

oldest

votes

up vote
0
down vote

For get the value, you can use the jQuery attr() method, check next example.

$('.clk-option').on('click', function ()

{

    var value = $(this).attr("value");

    alert("Value of the option is: " + value);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>

  <option value="value1">value1</option>

  <option class="clk-option" value="value2">value2</option>

</select>

For versions of JQuery greater or equal than 1.6 you can use prop() method too:

$('.clk-option').on('click', function ()

{

    var value = $(this).prop("value");

    alert("Value of the option is: " + value);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>

  <option value="value1">value1</option>

  <option class="clk-option" value="value2">value2</option>

</select>

answered Nov 11 at 14:04

D. Smania

2,8001321

add a comment |

up vote
0
down vote

Here you go with a solution

$('select').on('change', function () {

  //console.log($(this).val(), $('select option:selected').attr('class'));

  if ($('select option:selected').attr('class') === "clk-option") {

    // ---- put your conditional code here

  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>

  <option value="value1">value1</option>

  <option class="clk-option" value="value2">value2</option>

</select>

Hope this will help you.

answered Nov 11 at 14:07

Shiladitya

9,39391830

Did you read the question, he explicity says don't wanted to use the onChange event.
– D. Smania
Nov 11 at 14:11

@Shiladitya I want this using on click because onchange script used for other task so please suggest me using only click event
– MSP
Nov 11 at 14:17

@MSP Click has been depreciated, you won't capture the click event at least in Chrome. I would request you to tweak you code and make it happen with onChange event
– Shiladitya
Nov 11 at 14:31

add a comment |

up vote
0
down vote

You can use this :

<!DOCTYPE html>

<head>

<title></title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>

$(function () {

    $(".clk-option").click(function(){

        alert("The button was clicked.");

    });

});

</script>

</head>

<body>

<select>

  <option value="value1">value1</option>

  <option class="clk-option" value="value2">value2</option>

</select>

</body>

Source :

https://www.w3schools.com/jquery/event_click.asp

edited Nov 11 at 14:13

answered Nov 11 at 13:52

Shim-Sao

13216

i tried your code but it is not working I mean didn't get any alert
– MSP
Nov 11 at 13:54

You can see the error in the console of your browser. How do you insert your script... without these informations it's to hard to say why it's not working.
– Shim-Sao
Nov 11 at 14:00

no console error in script it is fine but surprise why this is not working
– MSP
Nov 11 at 14:04

I edit my post to reflect script insertion in a page.
– Shim-Sao
Nov 11 at 14:06

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53249380%2fhow-to-get-alert-and-value-when-click-on-option-from-select-tag-using-jquery-met%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

up vote
0
down vote

For get the value, you can use the jQuery attr() method, check next example.

$('.clk-option').on('click', function ()

{

    var value = $(this).attr("value");

    alert("Value of the option is: " + value);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>

  <option value="value1">value1</option>

  <option class="clk-option" value="value2">value2</option>

</select>

For versions of JQuery greater or equal than 1.6 you can use prop() method too:

$('.clk-option').on('click', function ()

{

    var value = $(this).prop("value");

    alert("Value of the option is: " + value);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>

  <option value="value1">value1</option>

  <option class="clk-option" value="value2">value2</option>

</select>

answered Nov 11 at 14:04

D. Smania

2,8001321

add a comment |

up vote
0
down vote

For get the value, you can use the jQuery attr() method, check next example.

$('.clk-option').on('click', function ()

{

    var value = $(this).attr("value");

    alert("Value of the option is: " + value);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>

  <option value="value1">value1</option>

  <option class="clk-option" value="value2">value2</option>

</select>

For versions of JQuery greater or equal than 1.6 you can use prop() method too:

$('.clk-option').on('click', function ()

{

    var value = $(this).prop("value");

    alert("Value of the option is: " + value);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>

  <option value="value1">value1</option>

  <option class="clk-option" value="value2">value2</option>

</select>

answered Nov 11 at 14:04

D. Smania

2,8001321

add a comment |

up vote
0
down vote

For get the value, you can use the jQuery attr() method, check next example.

$('.clk-option').on('click', function ()

{

    var value = $(this).attr("value");

    alert("Value of the option is: " + value);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>

  <option value="value1">value1</option>

  <option class="clk-option" value="value2">value2</option>

</select>

For versions of JQuery greater or equal than 1.6 you can use prop() method too:

$('.clk-option').on('click', function ()

{

    var value = $(this).prop("value");

    alert("Value of the option is: " + value);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>

  <option value="value1">value1</option>

  <option class="clk-option" value="value2">value2</option>

</select>

answered Nov 11 at 14:04

D. Smania

2,8001321

For get the value, you can use the jQuery attr() method, check next example.

$('.clk-option').on('click', function ()

{

    var value = $(this).attr("value");

    alert("Value of the option is: " + value);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>

  <option value="value1">value1</option>

  <option class="clk-option" value="value2">value2</option>

</select>

For versions of JQuery greater or equal than 1.6 you can use prop() method too:

$('.clk-option').on('click', function ()

{

    var value = $(this).prop("value");

    alert("Value of the option is: " + value);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>

  <option value="value1">value1</option>

  <option class="clk-option" value="value2">value2</option>

</select>

$('.clk-option').on('click', function ()

{

    var value = $(this).attr("value");

    alert("Value of the option is: " + value);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>

  <option value="value1">value1</option>

  <option class="clk-option" value="value2">value2</option>

</select>

$('.clk-option').on('click', function ()

{

    var value = $(this).attr("value");

    alert("Value of the option is: " + value);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>

  <option value="value1">value1</option>

  <option class="clk-option" value="value2">value2</option>

</select>

$('.clk-option').on('click', function ()

{

    var value = $(this).prop("value");

    alert("Value of the option is: " + value);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>

  <option value="value1">value1</option>

  <option class="clk-option" value="value2">value2</option>

</select>

$('.clk-option').on('click', function ()

{

    var value = $(this).prop("value");

    alert("Value of the option is: " + value);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>

  <option value="value1">value1</option>

  <option class="clk-option" value="value2">value2</option>

</select>

answered Nov 11 at 14:04

D. Smania

2,8001321

answered Nov 11 at 14:04

D. Smania

2,8001321

answered Nov 11 at 14:04

D. Smania

2,8001321

answered Nov 11 at 14:04

D. Smania

2,8001321

add a comment |

up vote
0
down vote

Here you go with a solution

$('select').on('change', function () {

  //console.log($(this).val(), $('select option:selected').attr('class'));

  if ($('select option:selected').attr('class') === "clk-option") {

    // ---- put your conditional code here

  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>

  <option value="value1">value1</option>

  <option class="clk-option" value="value2">value2</option>

</select>

Hope this will help you.

answered Nov 11 at 14:07

Shiladitya

9,39391830

Did you read the question, he explicity says don't wanted to use the onChange event.
– D. Smania
Nov 11 at 14:11

@Shiladitya I want this using on click because onchange script used for other task so please suggest me using only click event
– MSP
Nov 11 at 14:17

@MSP Click has been depreciated, you won't capture the click event at least in Chrome. I would request you to tweak you code and make it happen with onChange event
– Shiladitya
Nov 11 at 14:31

add a comment |

up vote
0
down vote

Here you go with a solution

$('select').on('change', function () {

  //console.log($(this).val(), $('select option:selected').attr('class'));

  if ($('select option:selected').attr('class') === "clk-option") {

    // ---- put your conditional code here

  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>

  <option value="value1">value1</option>

  <option class="clk-option" value="value2">value2</option>

</select>

Hope this will help you.

answered Nov 11 at 14:07

Shiladitya

9,39391830

Did you read the question, he explicity says don't wanted to use the onChange event.
– D. Smania
Nov 11 at 14:11

@Shiladitya I want this using on click because onchange script used for other task so please suggest me using only click event
– MSP
Nov 11 at 14:17

@MSP Click has been depreciated, you won't capture the click event at least in Chrome. I would request you to tweak you code and make it happen with onChange event
– Shiladitya
Nov 11 at 14:31

add a comment |

up vote
0
down vote

Here you go with a solution

$('select').on('change', function () {

  //console.log($(this).val(), $('select option:selected').attr('class'));

  if ($('select option:selected').attr('class') === "clk-option") {

    // ---- put your conditional code here

  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>

  <option value="value1">value1</option>

  <option class="clk-option" value="value2">value2</option>

</select>

Hope this will help you.

answered Nov 11 at 14:07

Shiladitya

9,39391830

Here you go with a solution

$('select').on('change', function () {

  //console.log($(this).val(), $('select option:selected').attr('class'));

  if ($('select option:selected').attr('class') === "clk-option") {

    // ---- put your conditional code here

  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>

  <option value="value1">value1</option>

  <option class="clk-option" value="value2">value2</option>

</select>

Hope this will help you.

$('select').on('change', function () {

  //console.log($(this).val(), $('select option:selected').attr('class'));

  if ($('select option:selected').attr('class') === "clk-option") {

    // ---- put your conditional code here

  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>

  <option value="value1">value1</option>

  <option class="clk-option" value="value2">value2</option>

</select>

$('select').on('change', function () {

  //console.log($(this).val(), $('select option:selected').attr('class'));

  if ($('select option:selected').attr('class') === "clk-option") {

    // ---- put your conditional code here

  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>

  <option value="value1">value1</option>

  <option class="clk-option" value="value2">value2</option>

</select>

answered Nov 11 at 14:07

Shiladitya

9,39391830

answered Nov 11 at 14:07

Shiladitya

9,39391830

answered Nov 11 at 14:07

Shiladitya

9,39391830

answered Nov 11 at 14:07

Shiladitya

9,39391830

Did you read the question, he explicity says don't wanted to use the onChange event.
– D. Smania
Nov 11 at 14:11

@Shiladitya I want this using on click because onchange script used for other task so please suggest me using only click event
– MSP
Nov 11 at 14:17

@MSP Click has been depreciated, you won't capture the click event at least in Chrome. I would request you to tweak you code and make it happen with onChange event
– Shiladitya
Nov 11 at 14:31

add a comment |

Did you read the question, he explicity says don't wanted to use the onChange event.
– D. Smania
Nov 11 at 14:11

@Shiladitya I want this using on click because onchange script used for other task so please suggest me using only click event
– MSP
Nov 11 at 14:17

@MSP Click has been depreciated, you won't capture the click event at least in Chrome. I would request you to tweak you code and make it happen with onChange event
– Shiladitya
Nov 11 at 14:31

Did you read the question, he explicity says don't wanted to use the onChange event.
– D. Smania
Nov 11 at 14:11

@Shiladitya I want this using on click because onchange script used for other task so please suggest me using only click event
– MSP
Nov 11 at 14:17

@MSP Click has been depreciated, you won't capture the click event at least in Chrome. I would request you to tweak you code and make it happen with onChange event
– Shiladitya
Nov 11 at 14:31

add a comment |

up vote
0
down vote

You can use this :

<!DOCTYPE html>

<head>

<title></title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>

$(function () {

    $(".clk-option").click(function(){

        alert("The button was clicked.");

    });

});

</script>

</head>

<body>

<select>

  <option value="value1">value1</option>

  <option class="clk-option" value="value2">value2</option>

</select>

</body>

Source :

https://www.w3schools.com/jquery/event_click.asp

edited Nov 11 at 14:13

answered Nov 11 at 13:52

Shim-Sao

13216

i tried your code but it is not working I mean didn't get any alert
– MSP
Nov 11 at 13:54

You can see the error in the console of your browser. How do you insert your script... without these informations it's to hard to say why it's not working.
– Shim-Sao
Nov 11 at 14:00

no console error in script it is fine but surprise why this is not working
– MSP
Nov 11 at 14:04

I edit my post to reflect script insertion in a page.
– Shim-Sao
Nov 11 at 14:06

add a comment |

up vote
0
down vote

You can use this :

<!DOCTYPE html>

<head>

<title></title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>

$(function () {

    $(".clk-option").click(function(){

        alert("The button was clicked.");

    });

});

</script>

</head>

<body>

<select>

  <option value="value1">value1</option>

  <option class="clk-option" value="value2">value2</option>

</select>

</body>

Source :

https://www.w3schools.com/jquery/event_click.asp

edited Nov 11 at 14:13

answered Nov 11 at 13:52

Shim-Sao

13216

i tried your code but it is not working I mean didn't get any alert
– MSP
Nov 11 at 13:54

You can see the error in the console of your browser. How do you insert your script... without these informations it's to hard to say why it's not working.
– Shim-Sao
Nov 11 at 14:00

no console error in script it is fine but surprise why this is not working
– MSP
Nov 11 at 14:04

I edit my post to reflect script insertion in a page.
– Shim-Sao
Nov 11 at 14:06

add a comment |

up vote
0
down vote

You can use this :

<!DOCTYPE html>

<head>

<title></title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>

$(function () {

    $(".clk-option").click(function(){

        alert("The button was clicked.");

    });

});

</script>

</head>

<body>

<select>

  <option value="value1">value1</option>

  <option class="clk-option" value="value2">value2</option>

</select>

</body>

Source :

https://www.w3schools.com/jquery/event_click.asp

edited Nov 11 at 14:13

answered Nov 11 at 13:52

Shim-Sao

13216

You can use this :

<!DOCTYPE html>

<head>

<title></title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>

$(function () {

    $(".clk-option").click(function(){

        alert("The button was clicked.");

    });

});

</script>

</head>

<body>

<select>

  <option value="value1">value1</option>

  <option class="clk-option" value="value2">value2</option>

</select>

</body>

Source :

https://www.w3schools.com/jquery/event_click.asp

edited Nov 11 at 14:13

answered Nov 11 at 13:52

Shim-Sao

13216

edited Nov 11 at 14:13

answered Nov 11 at 13:52

Shim-Sao

13216

answered Nov 11 at 13:52

Shim-Sao

13216

answered Nov 11 at 13:52

Shim-Sao

13216

i tried your code but it is not working I mean didn't get any alert
– MSP
Nov 11 at 13:54

You can see the error in the console of your browser. How do you insert your script... without these informations it's to hard to say why it's not working.
– Shim-Sao
Nov 11 at 14:00

no console error in script it is fine but surprise why this is not working
– MSP
Nov 11 at 14:04

I edit my post to reflect script insertion in a page.
– Shim-Sao
Nov 11 at 14:06

add a comment |

i tried your code but it is not working I mean didn't get any alert
– MSP
Nov 11 at 13:54

You can see the error in the console of your browser. How do you insert your script... without these informations it's to hard to say why it's not working.
– Shim-Sao
Nov 11 at 14:00

no console error in script it is fine but surprise why this is not working
– MSP
Nov 11 at 14:04

I edit my post to reflect script insertion in a page.
– Shim-Sao
Nov 11 at 14:06

i tried your code but it is not working I mean didn't get any alert
– MSP
Nov 11 at 13:54

You can see the error in the console of your browser. How do you insert your script... without these informations it's to hard to say why it's not working.
– Shim-Sao
Nov 11 at 14:00

no console error in script it is fine but surprise why this is not working
– MSP
Nov 11 at 14:04

I edit my post to reflect script insertion in a page.
– Shim-Sao
Nov 11 at 14:06

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Nrthugu