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

加载文档后，您正在查找所选选项。大概你想在选择一个选项时执行这个动作。为此，您可以在select上绑定.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

问题是您的视图最初加载时没有为option选择任何#box_name。您必须在#box_name select字段中看到空选项。

对于每次选择更改，您需要将代码置于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 }
      }
    }
  });
});

jquery无法获得元素的值

2 个答案: