0

今日、私は自分のサイトを開発する途中で別の大きな問題に直面しています。私はいくつかの基本的なCSSを備えた通常のフォームを持っています。このようにフォームを使用したいのですが、一部のフィールドはデフォルトで非表示になり、ドロップダウンリストから選択したメニューに従ってそれぞれのテキストフィールドがアクティブになります。私は最初にそれを他の方法でPHPにしようと考えましたが、それは私の要件には適切ではありません。更新せずに同じページで動作するコードが必要です。したがって、JavaScriptまたはjQueryまたはAjaxの作業が必要です。しかし、私はこの言語が苦手なので、あなたの助けが必要です。

巨大なグーグルを行った後、私は私のために働いているJavaScriptコードの一部を見つけました。それはhttp://jsfiddle.net/ZxLU9/です

しかし、問題は、サイトで提供された2つのオプションでしか機能しないことです。追加してみましたid3。しかし、IDを増やすと、コードが機能しなくなります。また、このコードはtbodyを使用していますが、隠しフォームのデザインは完全に壊れています。ここで完全なコードを共有しています。コード内にいくつかのPHPコードがありますが、それは無視してください。今のところ、それについては心配していません。この問題を実際のデザインで修正してください。 ここで完全なコードにアクセスできます：
http ： //jsfiddle.net/QvJH6/2/

EXTRAという名前のフィールドを確認してください。。。。それは私がそのコードを置きたいものです。

4

2 に答える 2

1

Jqueryの変更イベントを使用します。

 $('#select_box').change(function() {
   if($(this).val() == "somevalue"){
     if($(this).next('input').css("display") == "none"){
          $(this).next('label').show();
          $(this).next('input').show();
      //Code to hide any existing fields go here.
     }
   }
 });

すべてを一貫性のあるものにすれば、それはうまくいくはずです。そうでない場合は、選択ボックスごとに1つ実行し、表示するフィールドを指定する必要があります。

于 2012-08-08T19:07:38.387 に答える
0

//関数呼び出しをから変更します

// onchange = "display（this、'text'、'image'）;"

// to // onchange = "display（this、'text'、'image'、invisible）;"

//また、javascriptの表示関数を次のように変更します

function display(obj,id1,id2,id3) {
           txt = obj.options[obj.selectedIndex].value;
           document.getElementById(id1).style.display = 'none';
           document.getElementById(id2).style.display = 'none';
           document.getElementById(id3).style.display = 'none';
           if ( txt.match(id1) ) {
              document.getElementById(id1).style.display = 'block';
           }
           if ( txt.match(id2) ) {
              document.getElementById(id2).style.display = 'block';
           }
           if ( txt.match(id3) ) {
              document.getElementById(id2).style.display = 'block';
           }

}

于 2012-08-08T19:12:09.697 に答える