web-dev-qa-db-ja.com

jQuery：入力要素の非表示と表示

私がやろうとしているのは、選択値がチェックされている場合に特定の入力オブジェクトを非表示/表示することです。

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();
        }
    });
});

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

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

最初にページを読み込んだときに非表示にするトリックはありますか？値を手動で選択したときだけではありません。

君たちありがとう。

jqueryinputhideshow
12
inrob

追加するだけです：

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

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

i.e。

$(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/

16
Travis J

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

#add_fields_placeholderValue{display:none;}

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

また、同じid（ブランドンによって指摘された）を持つ複数の要素がありますが、これは無効です

2
Musa

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

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();
    });
});

しかし、私は他の人々が通常何をしているのか興味があります。

1
Tuanderful

CSSで簡単にできます。

ここでIDを変更します。

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

すでにここで使用しているので

<div id="add_fields_placeholderValue">

そして、このCSSを追加します：

#add_fields_placeholderValue {
  display: none;       
}​
1
Brandon

無名メソッドを呼び出し可能な関数に変更すると、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();
    }
}​
1
Craig Payne

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

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

準備完了ハンドラーで実行すると、特定の状況で要素の「フラッシュ」が発生する場合があります。

ドキュメントの準備でhide（）を呼び出すときらめく

1
Dave R.