2013-02-13 3 views
0

Я пытался реализовать раскрывающийся список, где, если выбор сделан, тогда он отобразит выбранные элементы над выпадающим списком.Создание списка элементов из выпадающего меню в php

Я использую сайт под

http://odyniec.net/articles/multiple-select-fields/

Специфический раздел Я использую это ниже «Fancy Javascript Method», но я поставил код в jsfiddle он не работает, как показано ,

Может ли кто-нибудь мне помочь? Любая помощь приветствуется.

Спасибо!

+1

вы можете связать нас с вашей скрипкой? –

+0

Я просто скопировал с сайта http://jsfiddle.net/KuY4S/1/ – emochoco

+0

Итак, опубликуйте, что вы получили до сих пор. – BornKillaz

ответ

0

Я очистил его немного, код был немного выключен.

function selectIngredient(select) { 
    var value = select.val(); 
    var $ul = $(select).prev('ul'); 

    if ($ul.find('input[value=' + value + ']').length == 0) 
    $ul.append('<li onclick="$(this).remove();">' + 
     '<input type="hidden" name="ingredients[]" value="' + 
     value + '" /> ' + value + '</li>'); 
} 

$('select.options').on('change' , function() { 
    selectIngredient($(this)); 
}); 

демо: http://jsfiddle.net/c5s9c/

+0

спасибо, это работает! – emochoco

+0

Как я могу исправить проблему, когда сыр уже выбран, и я удаляю сыр, но не могу выбрать сыр напрямую, потому что изменение не срабатывает? – emochoco

0

Попробуйте это:

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html" /> 
    <title>Ingredients</title> 

    <script type="text/javascript"> 
    <!-- 
     function selectIngredient(select) 
    { 
     var option = select.options[select.selectedIndex]; 
     var ul = select.parentNode.getElementsByTagName('ul')[0]; 

     var choices = ul.getElementsByTagName('input'); 
     for (var i = 0; i < choices.length; i++) 
     if (choices[i].value == option.value) 
      return; 

     var li = document.createElement('li'); 
     var input = document.createElement('input'); 
     var text = document.createTextNode(option.firstChild.data); 

     input.type = 'hidden'; 
     input.name = 'ingredients[]'; 
     input.value = option.value; 

     li.appendChild(input); 
     li.appendChild(text); 
     li.setAttribute('onclick', 'this.parentNode.removeChild(this);');  

     ul.appendChild(li); 
    } 
    --> 
    </script> 
</head> 

<body> 

<?php 

if (isset($_POST['ingredients'])) { 

    if (!empty($_POST['ingredients'])) { 

     echo '<fieldset><legend>Your ingredients</legend>'; 

     foreach ($_POST['ingredients'] as $ingredient) { 

      echo '<p>- ', $ingredient, '</p>'; 

     } 

     echo '</fieldset>'; 

    } else { 

     echo '<p>No ingredients selected!</p>'; 

    } 

} 

?> 
<form action="" method="post"> 

<ul> 
<li onclick="this.parentNode.removeChild(this);"> 
    <input type="hidden" name="ingredients[]" value="Cheese" /> 
    Cheese 
</li> 
<li onclick="this.parentNode.removeChild(this);"> 
    <input type="hidden" name="ingredients[]" value="Ham" /> 
    Ham 
</li> 
<li onclick="this.parentNode.removeChild(this);"> 
    <input type="hidden" name="ingredients[]" value="Mushrooms" /> 
    Mushrooms 
</li> 
</ul> 

<select onchange="selectIngredient(this);"> 
<option value="Cheese">Cheese</option> 
<option value="Olives">Olives</option> 
<option value="Pepperoni">Pepperoni</option> 
</select> 

<input type="submit" value="go" /> 
</form> 
</body> 
</html> 
+0

Он работает спасибо! – emochoco

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