CODEWITHSUNDEEP
javascriptjqueryjquery-plugins
Mithun Debnath
Mithun Debnath

Reputation: 588

how to pass dropdown selected value in jquery plugin

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?

Upvotes: 0

Views: 1874

Answers (4)

luukvhoudt
luukvhoudt

Reputation: 1992

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");

Upvotes: 0

Kedves Hunor
Kedves Hunor

Reputation: 825

You should try :

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

or

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

Upvotes: 0

Syed Muhammad Zeeshan
Syed Muhammad Zeeshan

Reputation: 1045

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.

Upvotes: 0

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

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);

Upvotes: 2

Related Questions