16

選択値がチェックされている場合、特定の入力オブジェクトを非表示/表示しようとしています。

JSFiddleのコード

コードのHTML部分は次のとおりです。

<label for="add_fields_placeholder">Placeholder: </label>
<select name="add_fields_placeholder" id="add_fields_placeholder">
    <option value="50">50</option>
    <option value="100">100</option>
    <option value="Other">Other</option>
</select>
<div id="add_fields_placeholderValue">
    Price:
    <input type="text" name="add_fields_placeholderValue" id="add_fields_placeholderValue">
 </div>​

そして、jQueryの部分はここにあります：

$(document).ready(function()
{
    $("#add_fields_placeholder").change(function() {
        if($(this).val() == "Other") {
            $("#add_fields_placeholderValue").show();
        }
        else {
            $("#add_fields_placeholderValue").hide();
        }
    });
});

したがって、ユーザーが「その他」を選択すると、別の入力オブジェクトが表示されます。

今の問題はこれです。最初にページを開くと、最初のオプションがデフォルトで選択され、オプションの入力オブジェクトが表示されます。別のオプションを選択すると非表示になります。

最初にページをロードするときにも非表示にするためのトリックはありますか？手動で値を選択する場合だけではありません。

君たちありがとう。

4

6 に答える 6

23

追加するだけです：

$("#add_fields_placeholderValue").hide();

ページ読み込み時の変更イベント宣言の後。

すなわち

$(document).ready(function()
{
 $("#add_fields_placeholder").change(function()
 {
  if($(this).val() == "Other")
  {
   $("#add_fields_placeholderValue").show();
  }
  else
  {
   $("#add_fields_placeholderValue").hide();
  }
 });
 $("#add_fields_placeholderValue").hide();
});

作業例: http://jsfiddle.net/bZXYR/

于 2012-08-11T23:15:20.683 に答える
2

css を使用して、最初は非表示にすることができます

#add_fields_placeholderValue{display:none;}

http://jsfiddle.net/FarVX/20/

また、同じID（ブランドンが指摘）を持つ複数の要素がありますが、これは有効ではありません

于 2012-08-11T23:18:08.543 に答える
1

私は通常、非表示/表示ロジックを除外します。

function foobar(){
    if($(this).val() == "Other"){
        $("#add_fields_placeholderValue").show();
    }
    else{
        $("#add_fields_placeholderValue").hide();
    }
}

ページがロードされたときに呼び出します。

$(document).ready(function(){
    foobar();
    $("#add_fields_placeholder").change(function(){
        foobar();
    });
});

でも、他の人が普段何をしているのか知りたいです。

于 2012-08-11T23:17:23.773 に答える
1

CSSで簡単に行うことができます：

ここで ID を変更します。

<input type="text" name="add_fields_placeholderValue" id="add_fields_placeholderValue">

あなたはすでにここでそれを使用しているので

<div id="add_fields_placeholderValue">

次に、次の css を追加します。

#add_fields_placeholderValue {
  display: none;       
}​
于 2012-08-11T23:19:11.913 に答える
1

匿名メソッドを呼び出し可能な関数に変更すると、Ready() で呼び出すことができるはずです

例えば

$(document).ready(function () {
    $("#add_fields_placeholder").change(ShowIfOther);
    ShowIfOther();
});

function ShowIfOther() {
    if ($("#add_fields_placeholder").val() == "Other") {
        $("#add_fields_placeholderValue").show();
    } else {
        $("#add_fields_placeholderValue").hide();
    }
}​
于 2012-08-11T23:21:32.397 に答える
1

プレースホルダー要素の下に次のコードを配置します。

<script>$('#add_fields_placeholderValue').hide();</script>

ready ハンドラーでそれを行うと、特定の状況で要素の「フラッシュ」が発生する場合があります。

ドキュメントの準備ができたときに hide() を呼び出すと点滅する

于 2012-08-11T23:23:44.763 に答える