jquery hide show輸入對象

我在jsfiddle上有這段代碼。我試圖做的所有事情是隱藏/顯示某個輸入對象，如果選中的值被選中。jquery hide show輸入對象

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

因此，如果用戶選擇了「其他」，它顯示另一個輸入對象。

現在的問題是這樣的。首先，當您打開頁面時，默認選擇第一個選項，並顯示可選的輸入對象。一旦你選擇另一個選項，它就隱藏起來。

當你第一次加載頁面時，是否有任何把它隱藏的技巧？不只是當你手動選擇一個值。

謝謝你們。

來源

2012-08-11 inrob

只需添加：

$("#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-11 23:15:20

謝謝你很多朋友:)這很好。 – inrob 2012-08-11 23:21:07

@bornie - nice：D – 2012-08-11 23:21:38

我通常分解出隱藏/顯示邏輯：

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-11 23:17:23 Tuanderful

謝謝你的代碼:) – inrob 2012-08-11 23:22:02

當然，希望它有幫助。與其他答案類似，當您使用預先填充的表單重新加載頁面時，此功能會派上用場。 – Tuanderful 2012-08-11 23:25:55

您可以使用CSS最初隱藏

#add_fields_placeholderValue{display:none;}

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

你也有相同的ID（由布蘭登指出的），這是無效的多個元素

來源

2012-08-11 23:18:08 Musa

如果您在不解決衝突ID的情況下執行此操作，輸入框將永遠不會顯示。至少它不會適合我。 – Brandon 2012-08-11 23:22:46

@Brandon謝謝，更新 – Musa 2012-08-11 23:27:39

你可以只需使用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-11 23:19:11 Brandon

謝謝。我不認爲這會是這種情況下最好的選擇。但是，您在其他情況下給了我一個額外的選項;）謝謝。 – inrob 2012-08-11 23:22:45

我同意，如果由於某種原因JavaScript未啓用div永遠不會顯示。你可能仍然想解析共享ID。 – Brandon 2012-08-11 23:27:18

如果你改變了匿名方法到一個可調用的函數，你應該能夠調用它就緒（）

$(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-11 23:21:32

放置佔位符元素之下的下面的代碼：

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

在準備處理程序否則它可能會誘發在某些情況下元件的「閃蒸」：

Twinkling when call hide() on document ready

來源

2012-08-11 23:23:44

jquery hide show輸入對象

回答

相關問題