获取跨度类下拉列表值

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>和值。

Answer 2

为了可扩展性，我稍微重组了你的 HTML 来处理。 现在，代码扫描.form_item_dropdown，然后使用您上次单击的任何 li 设置表单内的输入。

$(".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>