如何在jquery插件中传递下拉选择值

Question

我需要将下拉选择的值传递给jQuery插件。

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

我能够得到$('#src1')的值，如果用一些静态值分配var somlan，那么我的代码就能工作了。但是，如果我想使用下拉选择的值(其id为"sid" )并以var $soml = $('#sid');的形式检索插件中的值，那么我的代码就无法工作。

如何在插件中使用下拉选择的值？

Answer 1

尝试这样做:用两个参数而不是一个参数修改插件方法，并将选择框的值作为第二个参数传递。

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

插件

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

Answer 2

在你的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);

希望这能有所帮助。

Answer 3

你应该试着：

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

或

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