移动应用中的jQuery条件下拉列表

Question

我正在使用Jquery集成条件下拉列表，但是存在一些问题。

我需要默认值on = 1。
当打开移动应用程序的不同页面然后返回首页时，下拉菜单在退出应用程序然后再次打开之前不起作用。

编码。

    <!DOCTYPE html>
<html>
<head>

  <script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>

  <style type="text/css">
    #selMethod {
        display: none;
    }
    .header {
        background-color: #ff0000;
        padding: 5px 10px;
        font-weight: bold;
        margin-bottom: 10px;
    }
  </style>

  <title></title>
<script type='text/javascript'>
$(window).load(function(){
    $("select").change(function () {
    var str = "";

    str = parseInt($("select option:selected").val());

        if(str == 1){
          $("#selMethod").show();
          $("#sel0").show();
        } else if(str >= 1){
         $("#selMethod").show();
         for(var i = 0; i < 4; i++)
             $("#sel" + i).hide();
         str = str - 1;

         $("#sel" + str).show();
        }
      else
          $("#selMethod").hide();
});
});
</script>

</head>

<body>

<div id="homeop">
    <label for="main">Choose An Option: <span class="req">*</span></label>
    <select class="cat_dropdown" id="cat_dropdown" name="cat_dropdown">
        <option value="0">-- Please select --</option>
        <option value="1" selected>Search By Address</option>
        <option value="2">Restaurant Name</option>
        <option value="3">Cuisine</option>
        <option value="4">Food</option>
    </select>
</div>

<div id="selMethod">
    <div id="selOptions">
        <div id="selInfo">
            <div id="sel0" class="homeselinfo">
                   <h4 class="trn" data-trn-key="enter_your_location">Enter your location</h4>

                   <section class="field-section">
                     <input id="s" value="" type="text" class="text-input text-input--underbar trn" ng-model="text" placeholder="Street Address,City,State" data-trn-key="home_search_placeholder" 
                     style="display: block; width: 100%">
                   </section>

                   <div class="padtop25">
                   <button class="button button--quiet green" onclick="getCurrentLocation();">
                   <ons-icon icon="fa-location-arrow"></ons-icon>
                   <span class="trn" data-trn-key="use_my_location">Use my current location</span>
                   </button>       
                   </div>

                    <button class="button green-btn button--large" onclick="searchMerchant();">
                      <span class="trn" data-trn-key="search_restaurant">Search Restaurant</span>             
                      <div class="search-btn"><ons-icon icon="fa-chevron-right"></ons-icon></div>
                   </button>
            </div>

            <div id="sel1" class="homeselinfo">

                   <h4 class="trn" data-trn-key="enter_your_location">Find Restaurant by Name</h4>

                   <section class="field-section">
                     <input id="s" value="" type="text" class="text-input text-input--underbar trn" ng-model="text" placeholder="Restaurant Name" data-trn-key="home_search_placeholder" 
                     style="display: block; width: 100%">
                   </section>

                    <button class="button green-btn button--large" onclick="searchMerchant();">
                      <span class="trn" data-trn-key="search_restaurant">Search Restaurant</span>             
                      <div class="search-btn"><ons-icon icon="fa-chevron-right"></ons-icon></div>
                   </button>

            </div>

            <div id="sel2" class="homeselinfo">
                <p>selMENT INFO OPTION 3</p>
            </div>

            <div id="sel3" class="homeselinfo">
                <p>selMENT INFO OPTION 3333</p>
            </div>

        </div>
    </div>
</div>

</body>

</html>

Answer 1

我不得不替换整个脚本来解决问题，现在它可以正常工作了。

<style type="text/css">
div.method_options {
  display: none;
}
#tr_A {
    display:block;
}
</style>

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {

  $('#id_application_method').on('change', function() {

    $('div.method_options').hide();
    $('#tr_' + $(this).val()).show();

  });

});

</script>

移动应用中的jQuery条件下拉列表

问题描述

1 个解决方案

解决方案1
0 2016-03-06 23:37:32

移动应用中的jQuery条件下拉列表

问题描述

1 个解决方案

解决方案1 0 2016-03-06 23:37:32

解决方案1
0 2016-03-06 23:37:32