jQuery Добавить UL с LI со значением из выпадающего списка при нажатии кнопки - PullRequest
4 голосов
/ 13 июля 2009

У меня есть выпадающий список:

<select id="ContentList" name="ContentList">
  <option value="">Please Select</option>
  <option value="TEST_TOP">TEST TOP</option>
</select>

У меня есть сортируемый список:

<ul id="sortable">
  <li class="ui-state-default">First</li>
  <li class="ui-state-default">Second</li>
  <li class="ui-state-default">Third</li>
</ul>

У меня есть кнопка:

<input type="button" value="Add Section" id="btnAdd" class="button"/>

И следующий скрипт:

<script type="text/javascript">
        $(function() {


            $("#sortable").sortable({
                placeholder: 'ui-state-highlight'
            });
            $("#sortable").disableSelection();

            $('#btnAdd').click(function() {

            });

        });

    </script>

Когда пользователь выбирает что-то в раскрывающемся списке и нажимает кнопку Добавить, я хочу, чтобы его отправляли в сортируемый список как <li> с атрибутом класса и т. Д., Теперь в раскрывающемся списке отображается опция «Пожалуйста, выберите». *

Не уверен, что лучший подход. Спасибо

Ответы [ 2 ]

6 голосов
/ 13 июля 2009

рабочая демоверсия здесь

$('#btnAdd').click(function() { 

   //cache sortable
   var $sortable = $("#sortable"); 

   //clone sortables first li, change the text to that of the 
   //chosen option and append it to the sortable this saves having 
   //html embedded within the js

   $sortable.children().eq(0)
                       .clone()
                       .text( $('#ContentList').val() )
                       .appendTo( $sortable ); 

   // cache select options
   var $items = $('#ContentList').children(); 

   //remove selected item
   $items.filter(':selected').remove() 

   //set first option to be selected
   $list.eq(0).attr('selected', true); 
}); 
6 голосов
/ 13 июля 2009
$("#sortable").append("<li class='ui-state-default'>"+
                          $("#ContentList option:selected").text()+"</li>");
$("#ContentList option:selected").remove();

должен сделать трюк ... (:

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...