リンクのリストを取得してドロップダウンに変換しようとしている SO に関する投稿をいくつか 見てきました。私はそれらの例を取り上げましたが、それらを私のマークアップに適用するのはあまりうまくいきませんでした。これは少し異なります。入れ子になったラジオ ボタンのリストをラベル付きにして、それらを見出し付きのドロップ ダウン リストに変換し、入れ子になったラジオ入力とラベルを削除する必要があります。<optgroup>
基本的に、私が使用しているラジオ ボタンのリストは非常に制御不能であり、クリーンなドロップダウン リストは使いやすさと画面のスペースを大幅に改善します。変換を処理したら、元のラジオ ボタン セットを非表示にしてから、ユーザーのドロップダウン選択を対応するラジオ ボタンにマップして、フォームの送信時に処理する予定です。しかし、最初にドロップダウン リストを生成する必要があります。. .
開始マークアップの簡単なサンプルを次に示します。
<ul>
<li>
<label><input type="radio">USA</label>
<ul class="children">
<li>
<label><input type="radio" >Northeast</label>
<ul class="children">
<li>
<label><input itype="radio">Mid-Atlantic</label>
</li>
<li>
<label><input type="radio">New England</label>
</li>
</ul>
</li>
<li>
<label><input type="radio">South</label>
</li>
<li>
<label><input type="radio">West</label>
</li>
</ul>
</li>
<li>
<label><input type="radio" checked="checked">No Venue Region</label>
</li>
</ul>
上記を次のように変換しようとしています。
<select>
<optgroup label="USA">
<optgroup>Northeast</option>
<option>Mid-Atlantic</option>
<option>New England</option>
<optgroup>
<option>South</option>
<option>West</option>
</optgroup>
<option>No Region</option>
</select>
<ul>最初の例のトップ レベルにもラジオ ボタンが関連付けられていることに気付くかもしれませんが、これは、ユーザーが可能な限り正確に選択できるようにするため、望ましくありません。これらは見出しだったはずですが、残念ながら、生成されたものを制御することはできません。
私が好む解決策のタイプは、関数を使用して既存のマークアップを新しいエンティティに処理し、元のマークアップを非表示にした後に親 DOM 要素に追加できるようにすることです。
このSO スレッドでは、@Enki がこのアプローチを使用したソリューションを提供していますが、すべての要素をどのように反復するかがよくわからないため、適用できませんでした。彼の解決策は次のようになります。
function sitemapCycle(){
if(typeof(sitemapNode)==="undefined") sitemapNode= $("#sitemap");
if($(this).find("ul").length)
{
sitemapNode= $(sitemapNode).append('<optgroup label="'+$(this).children().first().text()+'" />').children().last();
$(this).find("ul li").each(sitemapCycle);
sitemapNode= $(sitemapNode).parent();
}
else
{
$(sitemapNode).append('<option value="'+$(this).children().attr("href")+'">'+$(this).text()+'</option>');
}
}
var sitemapNode;
$("#sitemap").removeAttr("id").after('<select id="sitemap" />').children().each(sitemapCycle).parent().remove();
@Enkiのアプローチを使用せず、optgroupのトップレベルを作成せず、本当に不完全である、私が得ることができた最も近いものはこれです:
$(function() {
$('#venue-regionchecklist').each(function() {
$(this).find('label').each(function() {
var cnt = $(this).contents();
$(this).replaceWith(cnt);
});
var $select = $('<select />');
$(this).find('li').each(function() {
var $option = $('<option />');
$(this).html($(this).html());
$option.attr('id', $(this).attr('id')).html($(this).html());
$select.append($option);
});
$(this).replaceWith($select);
});
});
これはラジオリストの簡略化されていないサンプルです。この種の問題にどのようにアプローチするかを知りたいです。