Javascript 移动应用程序中的Jquery条件下拉列表_Javascript_Jquery_Hybrid Mobile App_Onsen Ui

Javascript 移动应用程序中的Jquery条件下拉列表

javascript jquery

Javascript 移动应用程序中的Jquery条件下拉列表,javascript,jquery,hybrid-mobile-app,onsen-ui,Javascript,Jquery,Hybrid Mobile App,Onsen Ui,我正在使用Jquery集成一个条件下拉列表，但是我遇到了一些问题我需要默认值on=1 当打开移动应用程序的不同页面，然后返回主页时，只有退出应用程序，然后再次打开应用程序，下拉菜单才会起作用密码 <!DOCTYPE html> <html> <head> <script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script&g

我正在使用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>


#赛尔法{
显示：无；
}
.标题{
背景色：#ff0000；
填充物：5px10px；
字体大小：粗体；
边缘底部：10px；
}
$（窗口）。加载（函数（）{
$（“选择”）.change（函数（）{
var str=“”；
str=parseInt（$（“选择选项：选定”）.val（）；
如果（str==1）{
$（“#selMethod”）.show（）；
$（“#sel0”）.show（）；
}否则如果（str>=1）{
$（“#selMethod”）.show（）；
对于（变量i=0；i<4；i++）
$（“#sel”+i）.hide（）；
str=str-1；
$（“#sel”+str）.show（）；
}
其他的
$（“#selMethod”）.hide（）；
});
});
选择一个选项：*
--请选择--
按地址搜索
餐厅名称
美食
食物
输入您的位置
使用我的当前位置
搜索餐厅
按名字找餐馆
搜索餐厅
选择信息选项3
选择信息选项3333

我不得不替换整个脚本来解决问题，现在它开始工作了

<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>


div.method_选项{
显示：无；
}
#特鲁阿{
显示：块；
}
$（文档）.ready（函数（）{
$（“#id#u应用程序_方法”）。在（'change'，function（）上{
$（'div.method_options'）.hide（）；
$（this.val（））.show（）；
});
});