Jquery Условный выпадающий список в мобильном приложении

Я интегрирую условный выпадающий список с помощью Jquery, однако у меня возникают некоторые проблемы.

  1. Мне нужно значение по умолчанию на = 1.
  2. При открытии разных страниц мобильного приложения и последующем возврате на домашнюю страницу раскрывающийся список не работает, пока вы не выйдете из приложения и не откроете его снова.

Код.

    <!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>
Источник

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>
Источник
Другие вопросы по тегам