选择选项JavaScript不起作用

-1

当你按下按钮，演示，你可以在网上看到选择选项。不幸的是，当你点击第二个选项似乎没有被选中..默认值仍然存在..

不幸的是我花了太多时间试图修改CSS文件，现在我卡在这里！

你能弄清楚为什么选择不正常？

$(".dropdown dt a").click(function(){ 
    if($(this).hasClass("open")) { 
     $(this).blur(); 
     return false; 
    } 
    $(this).addClass("open"); 
    $(this).closest(".dropdown").find("ul").animate({opacity: 'show', height: 'show'}, 'fast'); 
    return false; 
}).blur(function() { 
    $(this).removeClass("open"); 
    $(this).closest(".dropdown").find("ul").animate({opacity: 'hide', height: 'hide'}, 'fast'); 
}); 
$(".dropdown dd ul a").click(function() { 
    var text = $(this).html(); 
    $(this).closest("dt").find("a").html(text); 
    $(this).parents("ul").hide(); 
    $(this).closest("select").val($(this).find("span.value").html()); 
    return false; 
}); 



    /* Fancy Dropdowns */ 
    function FancyDropdowns(selector){ 
     $(selector).each(function() { 
      var source = $(this); 
      var selected = source.find("option[selected]"); 
      var options = $("option", source); 
      var markup = '<dl class="dropdown">'; 
      markup += '<dt><a href="#">' + selected.text() + '<span class="value">' + selected.val() + '</span></a></dt>'; 
      markup += '<dd><ul>'; 
      options.each(function() { 
       markup += '<li><a href="#">' + $(this).text() + '<span class="value">' + $(this).val() + '</span></a></li>'; 
      }); 
      markup += '</ul></dd>'; 
      markup += '</dl>'; 
      source.after(markup); 
      source.hide(); 
     }); 
    } 

    $(document).ready(function() { 
     FancyDropdowns(".dropdown.fancy"); 
     $(".dropdown dt a").click(function(){ 
      if($(this).hasClass("open")) { 
       $(this).blur(); 
       return false; 
      } 
      $(this).addClass("open"); 
      $(this).closest(".dropdown").find("ul").animate({opacity: 'show', height: 'show'}, 'fast'); 
      return false; 
     }).blur(function() { 
      $(this).removeClass("open"); 
      $(this).closest(".dropdown").find("ul").animate({opacity: 'hide', height: 'hide'}, 'fast'); 
     }); 
     $(".dropdown dd ul a").click(function() { 
      var text = $(this).html(); 
      $(this).closest("dt").find("a").html(text); 
      $(this).parents("ul").hide(); 
      $(this).closest("select").val($(this).find("span.value").html()); 
      return false; 
     }); 
    });

来源

2013-12-10 dionysosz

你必须张贴** **你的代码，你的HTML和CSS，最好是在[的jsfiddle（http://jsfiddle.net/），所以我们可以看到你有什么问题。此外，很确定这是一个JS问题，而不是一个CSS问题，所以你正在寻找错误的位置-_- – Ming

感谢您的答复。代码张贴在我提供的链接上。您也可以找到它这里“view-source：http：//captaincodemonkey.com/sites/default/files/fancydropdown.html” – dionysosz

同样，你得到否定票的原因是因为你没有发布**你的**代码，* *您的**尝试解决问题，**您的**显示努力解决**您的**问题。 – Ming

有一个在JS有故障的选择规则。

$(this).closest("dt").find("a").html(text);

这是应该更新所选选项文本的行。它永远不会工作，因为.closest('x')遍历最初所谓的元素的父母，直到它遇到root。因为它正在寻找的元素是邻近对父母之一，它永远不会找到它。替换该行：

$(this).closest("dd").siblings("dt").find("a").html(text);

意味着它会找到它，找到最接近的父母，你寻求的项目是相邻的。

http://jsfiddle.net/Y86Qj/1/

来源

2013-12-10 02:05:22 Ming

<html> 

<head> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> 
    <script type="text/javascript"> 
    $(".dropdown dt a").click(function(){ 
    if($(this).hasClass("open")) { 
     $(this).blur(); 
     return false; 
    } 
    $(this).addClass("open"); 
    $(this).closest(".dropdown").find("ul").animate({opacity: 'show', height: 'show'}, 'fast'); 
    return false; 
}).blur(function() { 
    $(this).removeClass("open"); 
    $(this).closest(".dropdown").find("ul").animate({opacity: 'hide', height: 'hide'}, 'fast'); 
}); 
$(".dropdown dd ul a").click(function() { 
    var text = $(this).html(); 
    $(this).closest("dt").find("a").html(text); 
    $(this).parents("ul").hide(); 
    $(this).closest("select").val($(this).find("span.value").html()); 
    return false; 
}); 



    /* Fancy Dropdowns */ 
    function FancyDropdowns(selector){ 
     $(selector).each(function() { 
      var source = $(this); 
      var selected = source.find("option[selected]"); 
      var options = $("option", source); 
      var markup = '<dl class="dropdown">'; 
      markup += '<dt><a href="#">' + selected.text() + '<span class="value">' + selected.val() + '</span></a></dt>'; 
      markup += '<dd><ul>'; 
      options.each(function() { 
       markup += '<li><a href="#">' + $(this).text() + '<span class="value">' + $(this).val() + '</span></a></li>'; 
      }); 
      markup += '</ul></dd>'; 
      markup += '</dl>'; 
      source.after(markup); 
      source.hide(); 
     }); 
    } 

    $(document).ready(function() { 
     FancyDropdowns(".dropdown.fancy"); 
     $(".dropdown dt a").click(function(){ 
      if($(this).hasClass("open")) { 
       $(this).blur(); 
       return false; 
      } 
      $(this).addClass("open"); 
      $(this).closest(".dropdown").find("ul").animate({opacity: 'show', height: 'show'}, 'fast'); 
      return false; 
     }).blur(function() { 
      $(this).removeClass("open"); 
      $(this).closest(".dropdown").find("ul").animate({opacity: 'hide', height: 'hide'}, 'fast'); 
     }); 
     $(".dropdown dd ul a").click(function() { 
      var text = $(this).html(); 
      $(this).closest("dt").find("a").html(text); 
      $(this).parents("ul").hide(); 
      $(this).closest("select").val($(this).find("span.value").html()); 
      return false; 
     }); 
    }); 

    </script> 

    <style> 
     /* NICER DROPDOWNS */ 
     .dropdown dd, .dropdown dt, .dropdown ul { 
      margin: 0; 
      padding: 0; 
     } 

     .dropdown dd { 
      position: relative; 
     } 

     .dropdown a,.dropdown a:visited { 
      color: #666; 
      text-decoration: none; 
      outline: none; 
     } 

     .dropdown a:hover { 
      color: #e85326; 
     } 

     .dropdown dt a:hover { 
      color: #e85326; 
     } 

     .dropdown dt a { 
      background: #fff url("dropdown-arrow.png") no-repeat scroll right center; 
      display: block; 
      border: 1px solid #666; 
      width: 160px; 
      padding: 5px; 
     } 

     .dropdown dt a span { 
      cursor: pointer; 
      display: block; 
     } 

     .dropdown dd ul { 
      background: #fff none repeat scroll 0 0; 
      border: 1px solid #666; 
      color: #666; 
      display: none; 
      left: 0; 
      position: absolute; 
      top: 2px; 
      width: auto; 
      min-width: 170px; 
      list-style: none; 
      padding: 5px 0; 
     } 

     .dropdown dd ul li a { 
      display: block; 
      padding: 5px; 
     } 

     .dropdown dd ul li a:hover { 
      background-color: #333; 
     } 

     .dropdown img.flag { 
      border: none; 
      vertical-align: middle; 
      margin-left: 10px; 
     } 

     .dropdown span.value,.flagvisibility { 
      display: none; 
     } 
    </style> 

</head> 

<body> 

<select name="myselect-id" class="dropdown fancy"> 
    <option selected="selected" value="25">Test 25</option> 
    <option value="26">Test 26</option> 
    <option value="27">Test 27</option> 
    <option value="28">Test 28</option> 
    <option value="29">Test 29</option> 
    <option value="30">Test 30</option> 

</select> 

</body> 

</html>

来源

2013-12-10 01:53:42 dionysosz

选择选项JavaScript不起作用

回答

相关问题