0

私はドロップダウンを実装しようとしてきました。選択が行われると、ドロップダウンの上に選択されたアイテムが一覧表示されます。

以下のサイトを利用しています

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

私が使用している特定のセクションは「ファンシーJavascriptメソッド」の下にありますが、コードをjsfiddleに配置すると、示されているように機能しません。

誰か助けてくれませんか？どんな助けでも大歓迎です。

ありがとう！

4

2 に答える 2

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>
于 2013-02-13T15:51:08.143 に答える
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/

于 2013-02-13T15:55:07.317 に答える