jquery无法获取元素的值

Question

我有以下代码。但似乎变量v始终为空。所以select2无法获取json响应。我的方法获取其他元素的值有什么问题？

<script> 
$(document).ready(function() { 
    var v = $('select#box_name').find('option:selected').val(); 

    $('#box_assoc_items').select2({ 
    placeholder: 'choose items', 
    multiple: true, 
    ajax: { 
     url: "/dishes/"+v+"/get_assoc_items.json", 
     dataType: 'json', 
     data: function(term, page) { 
     return { q: term, page: page, per: 10 
     } 
     }, 
     results: function(data, page) { 
     return { results: data } 
     } 
    } 
    }); 
}); 
</script> 

<%= simple_form_for([@restaurant, @order, @box]) do |f| %> 
    <%= f.input :name, :collection => @dishes %> 
    <%= f.input :assoc_items, :input_html => {:type => "hidden", :maxlength => 2, :style => 'width:400px'} %> 
    <%= bootstrap_button(f, "Add a dish") %> 
<% end %> 

等效HTML是如下：

<form accept-charset="UTF-8" action="/restaurants/5/orders/4/boxes" class="simple_form new_box" id="new_box" method="post"><div style="margin:0;padding:0;display:inline"> 
<input name="utf8" type="hidden" value="&#x2713;" /> 
<input name="authenticity_token" type="hidden" value="zd3shkqtmbfFe3Sl3aoG39gQj1mslX7FHPHGJsgqxzQ=" /></div> 
<div class="input select optional box_name"> 
    <label class="select optional" for="box_name">Name</label> 
    <select class="select optional" id="box_name" name="box[name]"> 
    <option value=""></option> 
    <option value="9">combo 3</option> 
    <option value="10">test dish</option> 
    <option value="11">test 20</option></select></div> 
<div class="input string optional box_assoc_items"> 
    <label class="string optional" for="box_assoc_items">Assoc items</label> 
    <input class="string optional" id="box_assoc_items" maxlength="2" name="box[assoc_items]" size="50" style="width:400px" type="hidden" /></div> 
<div class="control-group"> 
<div class="controls"> 
<input class="button btn btn-primary" name="commit" type="submit" value="Create Box" />  
</div> 
</div> 
</form> 

Answer 1

您只要您加载文件寻找所选择的选项。大概你想在选择一个选项时执行这个动作。为此，您在您的选择上绑定.change()事件，如下所示：

$(document).ready(function() { 

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

     var v = $(this).find('option:selected').val(); 

     $('#box_assoc_items').select2({ 
      placeholder: 'choose items', 
      multiple: true, 
      ajax: { 
       url: "/dishes/"+v+"/get_assoc_items.json", 
       dataType: 'json', 
       data: function(term, page) { 
       return { q: term, page: page, per: 10 
       } 
       }, 
      results: function(data, page) { 
       return { results: data } 
      } 
     }); 
    }); 
}); 

Answer 2

的问题是你的看法最初加载不选择任何#box_nameoption。您必须在#box_nameselect字段中看到空白选项。

对于每一个选择的变化，你需要把你的代码在onchange事件如下：

$('#box_name').change(function() { 
    var v = $(this).val(); 

    $('#box_assoc_items').select2({ 
    placeholder: 'choose items', 
    multiple: true, 
    ajax: { 
     url: "/dishes/"+v+"/get_assoc_items.json", 
     dataType: 'json', 
     data: function(term, page) { 
     return { q: term, page: page, per: 10 
     } 
     }, 
     results: function(data, page) { 
     return { results: data } 
     } 
    } 
    }); 
});