Jquery छुपाएं इनपुट इनपुट ऑब्जेक्ट

Question

मेरे पास यह कोड jsfiddle पर है। मैं बस इतना करने की कोशिश कर रहा हूं, यदि कोई चयन मूल्य चेक किया गया है तो एक निश्चित इनपुट ऑब्जेक्ट छुपा रहा/दिखा रहा है।

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

तो उपयोगकर्ता का चयन करता है, तो "अन्य", यह एक और इनपुट वस्तु दिखाता है।

समस्या अब यह है। सबसे पहले जब आप पृष्ठ खोलते हैं तो पहला विकल्प डिफ़ॉल्ट रूप से चुना जाता है और वैकल्पिक इनपुट ऑब्जेक्ट दिखाया जाता है। एक बार जब आप एक और विकल्प चुनते हैं तो यह छुपाता है।

क्या आप पृष्ठ को पहले लोड करते समय इसे छिपाने के लिए कोई चाल है? न केवल जब आप मैन्युअल रूप से मूल्य चुनते हैं।

धन्यवाद दोस्तों।

Answer 1

बस जोड़ें:

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

Answer 2

मैं आम तौर पर छिपाने/शो तर्क को अलग:

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

लेकिन मुझे यह देखने के लिए उत्सुकता होगी कि अन्य लोग आमतौर पर क्या करते हैं।

Answer 3

आप इसे शुरू में छिपाने के लिए

#add_fields_placeholderValue{display:none;} 

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

इसके अलावा सीएसएस का उपयोग कर सकते आप एक ही आईडी (ब्रैंडन द्वारा बताया) है, जो मान्य नहीं है के साथ कई तत्व होते हैं

Answer 4

आप कर सकते थे बस इसे सीएसएस के साथ करें:

यहां आईडी बदलें:

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

आप पहले से ही इसे यहाँ

<div id="add_fields_placeholderValue"> 

का उपयोग करें और फिर इस सीएसएस जोड़ने के बाद से:

#add_fields_placeholderValue { 
    display: none;  
}​ 

Answer 5

यदि आप एक प्रतिदेय समारोह में गुमनाम पद्धति को बदलने, आप उस पर कॉल करने के लिए सक्षम होना चाहिए तैयार()

उदाहरण

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

Answer 6

प्लेस प्लेसहोल्डर तत्वों के नीचे निम्नलिखित कोड:

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

तैयार हैंडलर में यह कर प्रेरित कर सकते हैं कुछ निश्चित परिस्थितियों में तत्व की 'चमकती':

Twinkling when call hide() on document ready