選擇選項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不起作用

回答

相關問題