0

私はこの動的HTMLを持っています

<select id='posto'>
  <select>
    <ul id="nazioni">
      <li data-dal="Europa, Mediterraneo">Italia</li>
      <li data-dal="Europa, Mediterraneo">Spania</li>
      <li data-dal="Asia">Cina</li>
      <li data-dal="Europa, Asia, Mediterraneo">Turchia</li>
      <li data-dal="Africa, Mediterraneo">Egitto</li>
      <li data-dal="Europa">Francia</li>
      <li data-dal="Europa">Svezia</li>
    </ul>

コンマとスペースで個別の値に分割しようとしている「data-dal」値のタグで選択を埋めようとしています。私は新しい jQuery と Javascript の初心者ですが、stackOverflow と jQuery マニュアルで見つけたものからある種のコードをまとめることができましたが、すべての部分を目的のコードにまとめることができませんでした。

var items = {};
$('#nazioni li').each(function () {
  items[$(this).data('dal').split(', ')] = true;
});

var result = new Array();
for (var i in items) {
  result.push('<option>' + i + '</option>');
}

$('#posto').show().empty().append(result.join());

$('#posto').change(function () {
  var selected = $(this).find('option:selected').text();
  $('li[data-dal=' + selected + ']').show();
  $('li[data-dal!=' + selected + ']').hide();
});

http://jsfiddle.net/urnPG/ jsfiddle しました。data-dal 値を個別の値に分割できません。これを行うためのより良い方法で助けや指針をいただければ幸いです。

4

1 に答える 1

4

あなたの質問を正しく理解できたかどうかわかりません。でも、私にできることはお手伝いさせてください。まず、JSFIDDLE が更新されました。

<li>要素の値を一意の値の配列に分割し、<Select>これらの値を入力することができます。

$('#nazioni li').each(function () {
   var arr = $(this).data('dal').split(", ");
   items = items.concat(arr);
 });
 var sorted = unique(items);

この関数は、リストの一意の値を取得します。

function unique(list) {
   var result = [];
   $.each(list, function(i, e) {
     if ($.inArray(e, result) == -1) result.push(e);
       });
   return result;
}

<li>次に、選択したドロップダウン値に対応するすべての要素を表示しようとしました。

于 2013-01-11T18:55:35.790 に答える