0

ユーザーが選択したオプションに応じて、フォーム コンテンツを追加しようとしています。

たとえば、ユーザーがフォーム 1 オプションを選択した場合、ユーザーがオプション 2 を選択した場合とは異なるコンテンツがフォームに取り込まれます。

<select>
<option>Form 1</option>
<option>Form 2</option>
</select>

<form>
Here we get either form 1 content or form 2 content depending on the select option selected by user.
</form>


//Form 1 content
<input type="text" value="something" />
<input type hidden="something here" />

//Form 2 content
<input type="text" value="something else here" />
<input type hidden="something else here" />

jqueryを使用してこれを行うにはどうすればよいですか?

4

6 に答える 6

2

これを試してください：http：//jsfiddle.net/QUbEE/1/

$('select').change(function () {
  if ($('option:selected', this).val() == 1) {
      //$('form').hide();
      $('#form-1').html($('<input />').attr({
        'id': 'textBox1',
            'value': 'Something is here'
    }));
  } else {
      $('#form-1').html($('<input />').attr({
        'id': 'textBox2',
            'value': 'Something ELSE is here'
      }));
  }
});

Create elems depends on the change eventそしてちょうどreplace the html of the form with the new input with new values。

于 2013-02-18T10:43:22.883 に答える
1

2つの別々の形式で保持することをお勧めします。そして、それらを表示したままにします！したがって、javascriptを使用すると、両方のフォームを非表示にして、関連するフォームを表示できます。このように、ブラウザがjavascriptをサポートしていない場合でも、フォームは引き続き使用できます。

  <select id="toggle-forms">
    <option value="1">Form 1</option>
    <option value="2">Form 2</option>
  </select>
  <form id="form-1" class="form-to-toggle" acvtion="" method="">
    <input type="text" value="something" />
    <input type hidden="something here" />
    <input type="submit" value="submit form 1"/>
  </form>
  <form id="form-2" class="form-to-toggle" acvtion="" method="">
    <input type="text" value="something" />
    <input type hidden="something here" />
    <input type="submit" value="submit form 2"/>
  </form>
  <script>
  $('#toggle-forms').on('change', function() {
    $('.form-to-toggle').hide();
    $('#form-'+this.value).show();
  }).change();
  </script>

実際の動作をご覧ください：http：//jsbin.com/iwocid/1

于 2013-02-18T10:45:49.470 に答える
1

コメントでコンテンツをハードコーディングできると述べたように、フォームとそのフォームの両方を異なる div に配置し、ドロップダウン リストからの選択に応じて div の表示を切り替えることができます。

たとえば、フォーム 1 が div1 にあるとします。 

<div id="div1" class="formDiv">
  <input type="text" id="form1" value="something" />
  <input type hidden="something here" />
</div>

そしてあなたのform2はdiv2にあります

<div id="div2" class="formDiv">
  <input type="text" id="form2" value="something" />
  <input type hidden="something here" />
</div>

CSSで両方のdivを非表示にします（例としてクラスを使用） 

.formDiv {
  display: none;
}

ドロップダウンが次のようになっているとします 

<select id="selectForm">
<option value="div1">Form 1</option>
<option value="div2">Form 2</option>
</select>

ユーザーがその時点でドロップダウン リストから選択すると、div の可視性が変更されます

$('#selectForm').on('change',function(){
   $('.formDiv').hide();
   var formID = $('#selectForm').val();  
   $(formID).css('display', 'block');
});

これは単なる例です。実現可能性と効率に応じて、独自の ID とクラスを指定できます。
お役に立てれば

于 2013-02-18T10:41:09.013 に答える
0

このようなもの？オプションフォーム2を選択すると、フォーム2の入力にテストが追加されます。

<select>
<option value="1">Form 1</option>
<option value="2">Form 2</option>
</select>


//Form 1 content
<input type="text" id="form1" value="something" />
<input type hidden="something here" />

$('select').on('change',function(){
     $('input#form'+this.value).val('testing');
});
于 2013-02-18T10:33:29.913 に答える
0

フォームにIDを追加します。document.getElementById('idname').innerHTML値を埋めるために使用する

于 2013-02-18T10:33:40.000 に答える
0

私はこれを提案します（あなたと議論したように）

<select id='this'>
<option value="Form_1">Form 1</option>
<option value="Form_2">Form 2</option>
</select>
<form id='Form_1' style='display:none'>
form1 content
</form>
<form id='Form_2' style='display:none'>
 form2 content
</form>

とjs

$(document).ready(function() {  
 $('#this').change(function () {
    var form = $('#this').val();
    $('#'+form).show();
  });   
});
于 2013-02-18T10:44:37.543 に答える