OptGroupとオプションを動的に1つずつ追加します -- javascript フィールド と jquery フィールド と html フィールド 関連 問題

Add optgroup and options dynamically one by one












0
vote

問題

日本語

特定の条件に基づいてグループ化された複数のチェックボックスがあります。 画像の説明を入力しますここで

下記の例のグループ化されたドロップダウンを作成したい:

イメージの説明を入力

グループ化されたドロップダウンには、選択したすべての値(チェックボックスがチェックボックスがオンになります)1。チェックボックスをクリックして、そのチェックボックスの値をその区域グループの下のグループ化されたドロップダウンに追加したい。

私の場合では、ユーザーが選択した場合は、質問2とオプション9からのオプション6、質問3からのオプション9で、グループ化されたドロップダウンは以下のような値を持ちます。 <事前> <コード> Question2 -option 5 -option 6 Qution3 -option 9

これは jsfiddleリンク

英語

I have multiple check-boxes grouped based on certain condition: enter image description here

I want to populate a grouped dropdown like example given below:

enter image description here

Grouped dropdown will have all the values selected(checkboxes checked) from image 1. On click of the checkbox I want to add that checkboxes value to the grouped dropdown under that perticular group.

In my case if user selected option 5, option 6 from question2 and option 9 from question 3 then my grouped dropdown will have values like below

Question2   -option 5   -option 6 Qution3   -option 9 

here is jsfiddle link

</div
        

回答リスト

1
 
vote
vote
ベストアンサー
 

チェックボックス<コード> change イベントを監視し、質問を収集するためにすべてのチェックボックスを介して繰り返します。次に、選択のHTMLを生成します。

 <コード> var questions = {},    form = $('#questionsForm'),    checkboxes = $('.a', form),    select = $('#dynamic');    $(document).on('change', '.a', function() {    var i, j, item,      data = '';      questions = {};      checkboxes.each(function(idx, elem) {      item = $(elem);        if (!item.is(':checked')) {        return true;      }        if (!questions[item.data('question')]) {        questions[item.data('question')] = [];      }        questions[item.data('question')].push(item.data('option'));    });      for (i in questions) {      if (questions.hasOwnProperty(i)) {        data += '<optgroup label="Question ' + i + '">';          for (j = 0, n = questions[i].length; j < n; j++) {          data += '<option value="' + questions[i][j] + '">' + questions[i][j] + '</option>';        }          data += '</optgroup>';      }    }      select.html(data);  });  
 <コード> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  <form id="questionsForm">    <input type="checkbox" class="a" data-question="1" data-option="1" id="1" />    <label for="1">Question1-Option1</label>    <br/>    <input type="checkbox" class="a" data-question="1" data-option="2" id="2" />    <label for="2">Question1-Option2</label>    <br/>    <input type="checkbox" class="a" data-question="2" data-option="3" id="3" />    <label for="3">Question2-Option3</label>    <br/>    <input type="checkbox" class="a" data-question="5" data-option="1" id="4" />    <label for="4">Question5-Option1</label>  </form>    <br/>  <br/>  <select id="dynamic"></select>  
 

You can try to watch checkbox change event and reiterate over all checkboxes to collect questions. Then, generate HTML for the select.

var questions = {},    form = $('#questionsForm'),    checkboxes = $('.a', form),    select = $('#dynamic');    $(document).on('change', '.a', function() {    var i, j, item,      data = '';      questions = {};      checkboxes.each(function(idx, elem) {      item = $(elem);        if (!item.is(':checked')) {        return true;      }        if (!questions[item.data('question')]) {        questions[item.data('question')] = [];      }        questions[item.data('question')].push(item.data('option'));    });      for (i in questions) {      if (questions.hasOwnProperty(i)) {        data += '<optgroup label="Question ' + i + '">';          for (j = 0, n = questions[i].length; j < n; j++) {          data += '<option value="' + questions[i][j] + '">' + questions[i][j] + '</option>';        }          data += '</optgroup>';      }    }      select.html(data);  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  <form id="questionsForm">    <input type="checkbox" class="a" data-question="1" data-option="1" id="1" />    <label for="1">Question1-Option1</label>    <br/>    <input type="checkbox" class="a" data-question="1" data-option="2" id="2" />    <label for="2">Question1-Option2</label>    <br/>    <input type="checkbox" class="a" data-question="2" data-option="3" id="3" />    <label for="3">Question2-Option3</label>    <br/>    <input type="checkbox" class="a" data-question="5" data-option="1" id="4" />    <label for="4">Question5-Option1</label>  </form>    <br/>  <br/>  <select id="dynamic"></select>
</div
 
 
 
 

関連する質問

76  ハイフンのような特殊文字の後に単語を破る方法( - )  ( How to break word after special character like hyphens ) 
比較的単純なCSS: <コード> div { width: 150px; } <コード> <div> 12333-2333-233-23339392-332332323 </div> 文字列が width に制約される...

142  定義されたフォントのどれがWebページで使用されていたかを検出する方法  ( How to detect which one of the defined font was used in a web page ) 
私のページに次のCSSルールがあるとします。 <コード> body { font-family: Calibri, Trebuchet MS, Helvetica, sans-serif; } ユーザーのブラウザで定義されたフォントの1つを使用...

31  私は私のウェブサイトをiPhoneのアイコンに与えるのですか?  ( How do i give my websites an icon for iphone ) 
私が作成したWebサイトの iPhone に適切なアイコンを設定する方法は? ...

303  Internet Explorer 7の絶対に配置された親のパーセント幅の子要素の幅が崩壊したのはなぜですか。  ( Why did the width collapse in the percentage width child element in an absolutel ) 
私は、いくつかの子供を含む絶対に配置された div があり、そのうちの1つは比較的配置された div です。子<コード> Form1 で Form0 を使用すると、IE7の Form2 に折りたたみますが、FirefoxまたはSafariではなく。 For...

5  CSSのテーブルを垂直方向に揃える方法  ( How to vertically align a table in css ) 
画面の途中でテーブルをCSS?に垂直に揃える方法 ...

273  HTML形式の複数の送信ボタン  ( Multiple submit buttons in an html form ) 
HTMLフォームにウィザードを作成しましょう。 1つのボタンが戻ってき、1つが進みます。 ENTER を押すと、背面ボタンが最初に表示されているので、そのボタンを使用してフォームを送信します。 例: <コード> <form> <!-- Pu...

0  リスト項目でディスクを取り除く  ( Getting rid of disc in list item ) 
jQueryを使用してサイトを開発し、jQuery UIタブを作成しています。何らかの理由で、私のタブ(順序付けられていないリスト)は、OS XのFirefox 3を除くすべてのブラウザ(これまでにテスト済み)に弾丸を表示しています.Safari OS X、...

80  WebサービスからHTML文書を印刷する方法  ( How do i print an html document from a web service ) 
C#WebサービスからHTMLを印刷したいです。 Webブラウザコントロールはオーバーキルであり、サービス環境ではうまく機能しないため、非常に厳しいセキュリティ制約を持つシステムではうまく機能しません。基本的なHTMLページの印刷をサポートする<コード> 9...

635  ユーザーのタイムゾーンを決定します  ( Determine a users timezone ) 
WebサーバーがWebページ内のユーザーのタイムゾーンを決定できるようにするための標準的な方法はありますか? おそらくHTTPヘッダーまたは<コード> Form7 string? ...

4  Webの未来は何ですか? XHTML 2、HTML 5、または何か他のもの?  ( Whats the future of the web xhtml 2 html 5 or something else ) 
新しいバージョンのHTMLとXHTMLの新しいバージョンの両方の議論と進歩に混乱しています。彼らは競争相手ですか?もしそうなら、Webの採用された未来になることが最も好意的ですか?そうでなければ、それぞれの競合されていない目的は何ですか? ここではBluray...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有