3

クリックして値を非表示にし、テキストボックスから再表示できるようにしようとしていますが（これは簡単です）、テキストボックスの値は選択ボックスから選択されたものによって決まります。

これがJavaScriptです：

function changeValue(){
    var option=document.getElementById('filter').value;

    if(option=="1"){
            document.getElementById('field').value="Option 1";
    }
        else if(option=="2"){
            document.getElementById('field').value="Option 2";
        }

        else if(option=="3"){
            document.getElementById('field').value="Option 3";
        }

}

HTML は次のとおりです。

<input class="input" type ='text' name="key" id ="field" value ="Option 1" />
<select name="filter" id="filter" onchange="changeValue();">
<option id="1" value="1">Option 1</option>
<option id="2" value="2">Option 2</option>
<option id="3" value="3">Option 3</option>
</select>

私が直面している問題は、入力ボックスをクリックすると、javascript で決定された値に戻るのではなく、数値 1 の値に戻ることです。これに関する助けがあれば、大歓迎です。

4

2 に答える 2

1

js ファイルの先頭でグローバル変数 x を宣言し、各インスタンスでこの変数の値を設定します。

var x = 0;

function changeValue(){
var option=document.getElementById('filter').value;

if(option=="1"){
        document.getElementById('field').value="Option 1";
        x = 'option 1';
}
    else if(option=="2"){
        document.getElementById('field').value="Option 2";
        x = 'option 2';
    }

    else if(option=="3"){
        document.getElementById('field').value="Option 3";
        x = 'option 3';
    }

}

onblur と呼ばれる新しい関数を作成する

function inputOnBlur() {
    document.getElementById('field').value = x;
}

html

<input onblur="inputOnBlur()" class="input" type ='text' name="key" id ="field" value ="Option 1" />

onfocus 関数でテキストをクリアしたい場合は、同様のことができます

function inputOnFocus() {
     document.getElementById('field').value = '';
}

お役に立てれば！

于 2012-10-20T05:18:10.850 に答える
0

以下のコードとデモを見てください。スクリプトタグ内にスクリプトが含まれていない可能性があります

<html>   
   <head>
        <script>
            function changeValue(){
            var option=document.getElementById('filter').value;

            if(option=="1"){
                    document.getElementById('field').value="Option 1";
            }
                else if(option=="2"){
                    document.getElementById('field').value="Option 2";
                }

                else if(option=="3"){
                    document.getElementById('field').value="Option 3";
                }

             }
           </script>
   </head>
   <body>

      <input class="input" type ='text' name="key" id ="field" value ="Option 1" />
      <select name="filter" id="filter" onchange="changeValue();">
        <option id="1" value="1">Option 1</option>
        <option id="2" value="2">Option 2</option>
        <option id="3" value="3">Option 3</option>
     </select>
  </body>
</html>

http://jsfiddle.net/d4uAh/

于 2012-10-20T05:25:40.380 に答える