how to pass dropdown selected value in jquery plugin

Question

I need to pass the dropdown selected value to the jQuery plugin.

HTML:

<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.requiredplugin.js"></script>
  </head>
  <body>
    <select name="Type" id="sid">
      <option value="value1">value1</option>
      <option value="value2" selected>value2</option>
      <option value="value3">value3</option>
    </select>
    <textarea name="source" id="src1" cols="150" rows="20"></textarea>
    <script type="text/javascript">
      $("#src1").keyup(function(e) {
        $(this).pluginmethod(e.keycode);
      });
    </script>
  </body>
</html>

jquery.requiredplugin.js:

(function ($) {
  // jQuery plugin definition
  $.fn.pluginmethod = function (keycode) {
    return this.each(function () {
      var $str = $('#src1');
      var $soml = $('#sid');
      var somlan = $soml.val(); //if I assign  var somlan with some static value my code works
      var som = $str.val();
      /* My code goes here where I use both var som and  var somlan*/
    });
  };
})(jQuery);

I am able to get the value of $('#src1') and if assign var somlan with some static value then my code works. But if I want to use dropdown selected value(whose id is "sid" ) and retrieve the value in the plugin as var $soml = $('#sid'); then my code doesn't work.

How can I use dropdown selected value in my plugin?

Your code works, check fiddle http://jsfiddle.net/4ebw904g/. What actually do you need? — Anuj Yadav, Nov 04 '14 at 07:33

score 2 · Accepted Answer · answered Nov 04 '14 at 07:32

Try this : modify your plugin method with two argument instead of one and pass value of select box as second argument.

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.requiredplugin.js"></script>
</head>
<body>
<select name="Type" id="sid">

                <option value="value1">value1</option>
                <option value="value2" selected>value2</option>
                <option value="value3">value3</option>
                </select>
<textarea name="source" id="src1" cols="150" rows="20"></textarea>
<script type="text/javascript">
$("#src1").keyup(function(e) {
$(this).pluginmethod(e.keycode,$('#sid').val());
});
</script>
</body>
</html>

Plugin

(function($) {

// jQuery plugin definition

$.fn.pluginmethod = function(keycode, selectVal) {

       return this.each(function() {
       var $str = $('#src1'); 
       //var $soml = $('#sid'); 
       var somlan= selectVal; 
       var som= $str.val();

       /* My code goes here where I use both var som and  var somlan*/

     });
  };

})(jQuery);

score 0 · Answer 2 · answered Nov 04 '14 at 07:33

try it like this in your jquery.requiredplugin.js

(function($) {

$.fn.pluginmethod = function(keycode) {

       return this.each(function() {
       var $str = $('#src1'); 
       var $soml = $('#sid option:selected').text(); 
       var somlan= $soml.val();
       var som= $str.val();

       /* Your code goes here where you use both var som and  var somlan*/

     });
  };

})(jQuery);

Hope this helps.

score 0 · Answer 3 · answered Nov 04 '14 at 07:34

0

You should try :

$("#sid option:selected").text();

or

$("#sid option").is("selected").text()

answered Nov 04 '14 at 07:34

Kedves Hunor

815
1
11
19

score 0 · Answer 4 · edited May 23 '17 at 12:31

0

It looks like sormeone already asked a similar question at jQuery Get Selected Option From Dropdown

This will return an object if i'm right

var sid = $('#sid').find(":selected");

edited May 23 '17 at 12:31

Community

1
1

answered Nov 04 '14 at 07:34

luukvhoudt

1,726
19
33

how to pass dropdown selected value in jquery plugin

HTML:

jquery.requiredplugin.js:

4 Answers4