Выберите вариант javascript не работает

-1

Я пытаюсь реализовать Select - Option, найденный здесь.Выберите вариант javascript не работает

При нажатии на кнопку демо вы можете увидеть выберите опцию-онлайн. К сожалению, если вы нажмете второй вариант, он, похоже, не будет выбран. Значение по умолчанию все еще существует.

К сожалению, я потратил слишком много часов, пытаясь изменить файл CSS, и теперь я застрял здесь!

Можете ли вы понять, почему выбор не работает должным образом?

Вот мой код: http://jsfiddle.net/Y86Qj/

$(".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 не работает

ответ

Смежные вопросы