Question

这是我根据下拉列表选择显示或隐藏div的代码。它工作正常，但我遇到div.red的问题。如您所见，div还包含一个下拉列表，当我在此下拉列表中选择其中一个选项时，它会使整个红色div框消失。我不知道该怎么办。请帮帮我，谢谢

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Show Hide Using Select Box</title>
<style type="text/css">
    .box{
        padding: 20px;
        display: none;
        margin-top: 20px;
        border: 1px solid #000;
    }
    .red{ background: #ff0000; }
    .green{ background: #00ff00; }
    .blue{ background: #0000ff; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("select").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{
                $(".box").hide();
            }
        });
    }).change();
});
</script>
</head>
<body>
    <div>
        <select>
            <option>Choose Color</option>
            <option value="red">Red</option>
            <option value="green">Green</option>
            <option value="blue">Blue</option>
        </select>
    </div>
    <div class="red box">
<p>	<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select></p>
    First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
	</div>
    <div class="green box">You have selected <strong>green option</strong> so i am here</div>
    <div class="blue box">You have selected <strong>blue option</strong> so i am here</div>
</body>
</html>

＆＃13;

Answer 1

当您使用Element Selector ('element')时，事件处理程序将附加每个select元素。

相反，您可以使用ID Selector指定颜色选择器选择元素的ID和绑定事件处理程序。因此，事件处理程序将仅附加所需元素。

选择具有给定id属性的单个元素。

HTML 的

<select id="colorChooser">
    <option>Choose Color</option>
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
</select>

脚本

$("#colorChooser").change(function() {
});

另请注意，要获取select元素的选定值，可以使用val()。无需将.each()与:selected选择器一起使用。

＆＃13;

$(document).ready(function() {
  $("#colorChooser").change(function() {
    if ($(this).val() !== "") {
      var selector = "." + $(this).val();
      $('.box').not(selector).hide();
      $(selector).show();
    } else {
      $(".box").hide();
    }

  }).change();
});

＆＃13;

.box {
  padding: 20px;
  display: none;
  margin-top: 20px;
  border: 1px solid #000;
}
.red {
  background: #ff0000;
}
.green {
  background: #00ff00;
}
.blue {
  background: #0000ff;
}

＆＃13;

<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<div>
  <select id="colorChooser">
    <option>Choose Color</option>
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
  </select>
</div>
<div class="red box">
  <p>
    <select>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
  </p>
  First name:
  <input type="text" name="fname">
  <br>Last name:
  <input type="text" name="lname">
  <br>
</div>
<div class="green box">You have selected <strong>green option</strong> so i am here</div>
<div class="blue box">You have selected <strong>blue option</strong> so i am here</div>

＆＃13;

Answer 2

将ID设为第一个下拉列表，并根据id选择器执行更改事件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Show Hide Using Select Box</title>
<style type="text/css">
    .box{
        padding: 20px;
        display: none;
        margin-top: 20px;
        border: 1px solid #000;
    }
    .red{ background: #ff0000; }
    .green{ background: #00ff00; }
    .blue{ background: #0000ff; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#ddColor").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{
                $(".box").hide();
            }
        });
    }).change();
});
</script>
</head>
<body>
    <div>
        <select id="ddColor">
            <option>Choose Color</option>
            <option value="red">Red</option>
            <option value="green">Green</option>
            <option value="blue">Blue</option>
        </select>
    </div>
    <div class="red box">
<p> <select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select></p>
    First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
    </div>
    <div class="green box">You have selected <strong>green option</strong> so i am here</div>
    <div class="blue box">You have selected <strong>blue option</strong> so i am here</div>
</body>
</html>

类似地，您可以使用id作为其更改事件的第二个选择。

希望这可以帮助你： - ）

Answer 3

    import urllib2,re

    proxy = "*.*.*.*:8080"
    proxies = {"http":"http://%s" % proxy}
    headers={'User-agent' : 'Mozilla/5.0'}

    //rest of code here

    for num,cname in enumerate(match):
        r = re.compile('epi/(.*?)/')
        m = r.search(cname[0])
        episodeId = m.group(1)

        url = "http://api.somesite.net/api/data/Episode/"+str(episodeId);

        proxy_support = urllib2.ProxyHandler(proxies)
        opener = urllib2.build_opener(proxy_support, urllib2.HTTPHandler(debuglevel=0))
        urllib2.install_opener(opener)
        req = urllib2.Request(url, None, headers)
   try:
      html = urllib2.urlopen(req).read()
   except urllib2.URLError, e:
      raise MyException("There was an error: %r" % e)

  @retry(urllib2.URLError, tries=4, delay=3, backoff=2)

def urlopen_with_retry():
        return urllib2.urlopen("http://example.com")

您的代码会在两个选项上运行脚本，使其具有唯一ID，以便单独选择它们。

根据下拉选择隐藏或显示div

3 个答案: