JavaScript プルダウン選択時の動作について

Question

プルダウン内の「その他」選択時にのみテキストボックスを表示したいと思い、下記コードにて実装したのですがテキストボックスの内容をpostでcgiに渡せませんでした

<script type="text/javascript" >
 $(function() {
     $('select[name="SELECTBOX"]').change( function() {
          var $attribute = document.getElementById('VALUE').value;
          var $s_input = document.getElementById('DIV');
          if( $(this).val() == 1 ) {
               $s_input.innerHTML = $attribute + '<input type=\'hidden\' id=\'FORMNAME\' name=\'FORMNAME\' value= \' + $attribute + \'>' ;
          } else if( $(this).val() == 2 ) {
			$s_input.innerHTML = '<input type=\'text\' id=\'FORMNAME\' name=\'FORMNAME\' size=\'10\' maxlength=\'6\'>';
          } else {
               $s_input.innerHTML = '選択してください';
          }
	}).change();
});
</script>
<form method="post" action="/cgi-bin/index.cgi">
aaa<input type="hidden" id="VALUE" name="VALUE" value="aaa">

<select id="SELECTBOX" name="SELECTBOX">
     <option value="" selected>選択してください</option>
     <option value="1">選択1</option>
     <option value="2">選択2</option>
</select>

<div id="DIV" name="DIV"></div>

</form>

選択1の場合は、すでに表示されている「aaa」をdiv内に表示し、
選択2の場合は、テキストボックスを表示し、
postでcgiに、「aaa」もしくはテキストボックス入力値を
同じパラメータで渡したいと考えておりますが
どのようにコーディングすればよいかご教授いただけますでしょうか。

Answer 1

毎回 input要素を生成しなくても非表示にすればいいのでは。

<script type="text/javascript" >
$( function() {
	$( 'select[name="SELECTBOX"]' ).change( function() {
		var attribute = '';
		var hide_flag = true;
		$( '#FORMNAME' ).val( '' ); // 初期化
		if ( $( this ).val() == 1 ) {
			attribute = $( '#VALUE' ).val();
		} else if( $( this ).val() == 2 ) {
			hide_flag = false;
			attribute = '';
		} else {
			attribute = '選択してください';
		}
		$( '#DIV' ).toggleClass( 'hide', hide_flag );
		$( '#SPAN' ).html( attribute );
	} ).change();
} ); // （未テスト）
</script>
<style>
.hide input, span {
	display: none;
}
.hide span {
	display: inline;
}
</style>
<form method="post" action="/cgi-bin/index.cgi">
	<input type="hidden" id="VALUE" name="VALUE" value="aaa">
	<select id="SELECTBOX" name="SELECTBOX">
		<option value="" selected>選択してください</option>
		<option value="1">選択1</option>
		<option value="2">選択2</option>
	</select>
	<div id="DIV" name="DIV" class="hide"><span id="SPAN" name="SPAN"></span><input type="text" id="FORMNAME" name="FORMNAME" size="10" maxlength="6"></div>
</form>

Answer 2

ほとんどよさそうでしたが、$attributeが文字列のままなっていたのと、submitボタンがないので追加しました。余談ですが、jQueryの記述とそうでない記述が混ざっているので、どちらかに寄せたほうがいいかもしれませんね

<script type="text/javascript" >
 $(function() {
     $('select[name="SELECTBOX"]').change( function() {
          var $attribute = document.getElementById('VALUE').value;
          var $s_input = document.getElementById('DIV');
          if( $(this).val() == 1 ) {
               $s_input.innerHTML = $attribute + '<input type=\'hidden\' id=\'FORMNAME\' name=\'FORMNAME\' value= \'' + $attribute + '\'>' ;
          } else if( $(this).val() == 2 ) {
            $s_input.innerHTML = '<input type=\'text\' id=\'FORMNAME\' name=\'FORMNAME\' size=\'10\' maxlength=\'6\'>';
          } else {
               $s_input.innerHTML = '選択してください';
          }
    }).change();
});
</script>
<form method="post" action="/cgi-bin/index.cgi">
aaa<input type="hidden" id="VALUE" name="VALUE" value="aaa" >

<select id="SELECTBOX" name="SELECTBOX">
     <option value="" selected>選択してください</option>
     <option value="1">選択1</option>
     <option value="2">選択2</option>
</select>

<div id="DIV" name="DIV"></div>
<input type='submit'>
</form>

Comments

[BANDIT1250FABS]

ご回答いただき、ありがとうございます。
やはりsubmitで渡した値は受け取れないみたいです。
テキストボックスをハードコーディングしたら受け取れたんですが…
innerHTMLの仕様の問題ですかね

[popobot]

よくわかりませんが...
ブラウザのデベロッパーツールで、innerHTMLで作成したinputがおかしくないかみてみたらどうでしょうか。ブラウザによって挙動が違う可能性もあるかもしれません。

Answer 3

参考までに

$(function() {
  $('select[name="SELECTBOX"]').on('change',function(){
    var attribute = $('#VALUE').val();
    switch($(this).val()){
    case "1":
      $('#DIV').html(attribute).append($('<input>').attr({type:"hidden",id:"FORMNAME",value:attribute})) ;
      break;
    case "2":
      $('#DIV').html($('<input>').attr({type:"text",id:"FORMNAME",name:"FORMNAME",size:10,maxlength:6})) ;
      break;
    default:
      $('#DIV').html('選択してください');
    }
  }).change();
});

<form method="post" action="/cgi-bin/index.cgi">
aaa<input type="hidden" id="VALUE" name="VALUE" value="aaa">

<select id="SELECTBOX" name="SELECTBOX">
     <option value="" selected>選択してください</option>
     <option value="1">選択1</option>
     <option value="2">選択2</option>
</select>
<div id="DIV" name="DIV"></div>
<input type='submit' value="go">
</form>