Question

我们正在开发混合应用程序。我们有一个要求，例如用户选择选项以及选择了我们想要显示不同内容的选项。

例如，用户可以选择印度，美国，加拿大等选项。如果用户选择印度我们想要显示印度内容剩余隐藏。如果用户选择美国，我们希望显示美国内容保持隐藏。如果用户选择加拿大，我们希望显示加拿大内容保持隐藏。

但我们希望显示defualt india基于我们想要显示给用户的用户选择选项。

任何人请告诉我如何处理上述要求。是否有可能？

＆＃13;

$(document).ready(function(){
    $("#select1").change(function(){
    	
        $(this).find("option:selected").each(function(){
            if($(this).attr("value")=="red"){
                $(".box").not(".red").hide();
                $(".red").show();
            }
            else if($(this).attr("value")=="green"){
                $(".box").not(".green").hide();
                $(".green").show();
            }
            else if($(this).attr("value")=="blue"){
                $(".box").not(".blue").hide();
                $(".blue").show();
            }
            else if($(this).attr("value")=="yellow"){
                $(".box").not(".yellow").hide();
                $(".yellow").show();
            }
            else{
                $(".box").hide();
            }
        });
    }).change();
});

＆＃13;

<div data-role="content" >
		<select name="select" id="select1">
			<option value="red">QATAR</option>
			<option value="green">United Arab Emirates</option>
			<option value="blue">KUWAIT</option>
			<option value="yellow">OMAN</option>
		</select>

		<div class="red box" id="pageContentQtr">
		  <p>content-qatar</p>
		</div>
		
		<div class="green box" id="pageContentUae">
		  <p>content-uae</p>
		</div>

		<div class="blue box" id="pageContentKwt">
			<p>content-kuwait</p>
		</div>
		
		<div class="yellow box" id="pageContentOman">
			<p>content-oman</p>
		</div>
</div>

＆＃13;

Answer 1

Add the CSS First
Secound add js

.content{
    padding: 20px;
    display: none;
    margin-top: 20px;
    border: 1px solid #000;
}
.content-qatar{ background: #CCC; }
.content-uae{ background: #CCC; }
.content-kuwait{ background: #CCC; }

 <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
   <script type="text/javascript">
    $(document).ready(function(){
    $("select").change(function(){
     $(this).find("option:selected").each(function(){
        if($(this).attr("value")=="content-qatar"){
            $(".content").not(".content-qatar").hide();
            $(".content-qatar").show();
        }
        else if($(this).attr("value")=="content-uae"){
            $(".content").not(".content-uae").hide();
            $(".content-uae").show();
        }
        else if($(this).attr("value")=="content-kuwait"){
            $(".content").not(".content-kuwait").hide();
            $(".content-kuwait").show();
        }
        else{
            $(".content").hide();
         }
     });
  }).change();
 });
 </script>

 <div>
    <select>
        <option>Choose Country</option>
        <option value="content-qatar">Qater</option>
        <option value="content-uae">UAE</option>
        <option value="content-kuwait">Kuwait</option>
    </select>
</div>
<div class="content-qatar content">content-qatar</div>
<div class="content-uae content">content-uae</div>
<div class="content-kuwait content">content-kuwait</div>

如何使用单页Jquerymobile开发基于不同内容div选择的选项

1 个答案: