Question

我试图从下拉列表获得跨度值。我可以从以下行获取所选值：

   $(".home_button").click(function(){ 
   alert($('.selected_item.select-school').text())
});

但问题是它返回span类中的文本。因此，如果用户没有选择值，则返回我想要避免的“选择学校”。如何从li中获取确切的id或值并将其放入span类？

<div class="school_area form_item">
       <span class="glyphicon glyphicon-education item_icon">
         </span>
            <div class="count">
              <span class="selected_item select-school">Select School
              </span>
              <span class="down_icon glyphicon glyphicon-menu-down">
              </span>
            </div>
            <div class="form_item_dropdown">
              <div class="dropdown_wrapper">

                <li class="school" onclick="dropdown(this)">
                  <span class="icon glyphicon glyphicon-education">
                  </span>
                  <span id="1" class="school_title item_title">ABC
                  </span>
                </li>
                <li class="school" onclick="dropdown(this)">
                  <span class="icon glyphicon glyphicon-education">
                  </span>
                  <span id="2" class="school_title item_title">EFG
                  </span>
                </li>
                <li class="school" onclick="dropdown(this)">
                  <span class="icon glyphicon glyphicon-education">
                  </span>
                  <span id="3" class="school_title item_title">WOW
                  </span>
                </li>
              </div>
            </div>
       </div>

    <button class="home_button">Store
    </button>

Answer 1

你可以这样做：

$('.home_button').on('click', function(event){
    event.preventDefault();
    $('li.school > .school_title.activated').each(function(){
        console.log($(this).attr('id'));
    });
});

$('li.school > .school_title').on('click', function(){
    $(this).toggleClass('activated');
});

.activated {
    background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="school_area form_item">
<span class="glyphicon glyphicon-education item_icon">
 </span>
    <div class="count">
      <span class="selected_item select-school">Select School
      </span>
      <span class="down_icon glyphicon glyphicon-menu-down">
      </span>
    </div>
    <div class="form_item_dropdown">
      <div class="dropdown_wrapper">

        <li class="school">
          <span class="icon glyphicon glyphicon-education">
          </span>
          <span id="1" class="school_title item_title">ABC
          </span>
        </li>
        <li class="school">
          <span class="icon glyphicon glyphicon-education">
          </span>
          <span id="2" class="school_title item_title">EFG
          </span>
        </li>
        <li class="school">
          <span class="icon glyphicon glyphicon-education">
          </span>
          <span id="3" class="school_title item_title">WOW
          </span>
        </li>
      </div>
    </div>
</div>

<button class="home_button">Store</button>

但说实话，这很糟糕。我不知道您是否只能添加.school-item或多个。无论使用<form>和值，您都应该使用与checkbox或radio结合使用。

Answer 2

为了可扩展性，我重新构建了一些HTML进行处理。现在代码扫描.form_item_dropdown，然后在表单中设置输入，无论你最后点击的是什么。

$(".form_item_dropdown li").click(function () {
  $(this).closest(".form_item_dropdown").children("input").first().val($(this).attr("value"));
});

$(".home_button").click(function (e) {
  e.preventDefault();
  console.log($("#myFrom").serialize());
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myFrom">
    <div class="school_area form_item">
       <span class="glyphicon glyphicon-education item_icon">
         </span>
            <div class="count">
              <span class="selected_item select-school">Select School
              </span>
              <span class="down_icon glyphicon glyphicon-menu-down">
              </span>
            </div>
            <div class="form_item_dropdown">
              <input type="hidden" name="school" value="1">
              <div class="dropdown_wrapper">
                <li value="1">
                  <span class="icon glyphicon glyphicon-education">
                  </span>
                  <span class="school_title item_title">ABC
                  </span>
                </li>
                <li value="2">
                  <span class="icon glyphicon glyphicon-education">
                  </span>
                  <span class="school_title item_title">EFG
                  </span>
                </li>
                <li value="3">
                  <span class="icon glyphicon glyphicon-education">
                  </span>
                  <span class="school_title item_title">WOW
                  </span>
                </li>
              </div>
            </div>
       </div>

    <button class="home_button">Store
    </button>
</form>

获取span class下拉值

2 个答案: