2010-12-03 6 views
7

मेरे पास कुछ चुनिंदा फ़ील्ड और कुछ इनपुट फ़ील्ड के साथ छिपी हुई फ़ॉर्म है। बटन पर क्लिक करें उस फॉर्म को दिखाना चाहिए और फ़ील्ड में कुछ मान सेट करना चाहिए। इनपुट फ़ील्ड दिए गए मानों से भरे हुए हैं लेकिन मुझे चुनिंदा फ़ील्ड में समस्या है।jQuery चयन के साथ इसे बदलना चयनित विकल्प नहीं दिखाता

इस कोड का उपयोग करना: उस मान से

$("#form select[name=user]").val(value); 

विकल्प का श्रेय जाता है "चुना" (Firebug में जाँच), लेकिन चुनिंदा क्षेत्र अभी भी पता चलता (प्रारंभिक) विकल्प "चुनें"।

मैंने मूल्य निर्धारित करने के बाद फोकस और धुंध करने की कोशिश की लेकिन यह काम नहीं किया।

कोई सुझाव?

<form action="#" id="form" class="fix"> 
<div class="holder"> 
    <label>User:</label> 
    <select name="user" class="styled"> 
     <option value="0" selected>Choose</option> 
     <option value="1">User 1</option> 
     <option value="2">User 2</option> 
     </select> 
    </div> 
</form> 

और बुला jQuery बयान से:

$("#form select[name=user]").val('2'); 
$("#form").show(); 

मैं Firebug में यह मिलता है:

<form action="#" id="form" class="fix" style="display:none"> 
<div class="holder"> 
    <label>User:</label> 
    <select name="user" class="styled"> 
     <option value="0">Choose</option> 
     <option value="1">User 1</option> 
     <option value="2" selected>User 2</option> 
     </select> 
    </div> 
</form> 

लेकिन


यह काफी मानक रूप है पाठ का चयन करें "चुनें" रहता है। अगर मैं फॉर्म जमा करता हूं, तो मूल्य सही ढंग से पारित होता है।

यदि मैं फॉर्म रीसेट करता हूं और कुछ विकल्प चुनता हूं तो चयनित विकल्प का टेक्स्ट ठीक से दिखाया गया है। यही मेरे लिए अजीब बात है।

+0

यह jQuery 1.8.3 के साथ काम करता है और 1.9.0 – profimedica

उत्तर

0

'#form select[name=user]' जैसे एक <select name="user"> तत्व यह है कि "फार्म" की आईडी के साथ एक तत्व के बच्चे है चुनने के लिए कोशिश कर रहा है ...:

<div id="form"> 
    <select name="user"> // This element 

मेरा मानना ​​है कि आप निम्नलिखित हैं:

$("form select[name=user]").val(value); 

वह अब एक <select name="user"> तत्व यह है कि एक फार्म का बच्चा है, उदाहरण के लिए चुनना चाहिए:

<form> 
    <select name="user"> //This element 
+0

हम दो के लिए रूपों और यही कारण है कि हम फॉर्म के लिए आईडी का उपयोग करते हैं। मैंने उदाहरण को सरल बनाने के लिए फॉर्म डाला। वह हिस्सा काम करता है जैसा इसे करना चाहिए। :) – Jovica

17

मुझे एक समाधान मिला। मैं परिवर्तन घटना को कॉल करना भूल गया। मुझे नहीं पता था कि jQuery स्वचालित रूप से ऐसा नहीं करता है। तो समाधान के लिए कोड है:

$("form select[name=user]").val(value).change(); 
3

मुझे एक ही समस्या थी। http://api.jquery.com/attr/ पर, .attr() के बजाय .prop() विधि के बारे में कुछ नोट्स हैं। इसके अलावा, जोविका के जवाब की तरह, बदल गया विकल्प केवल फ़ायरफ़ॉक्स में दिखाई देता है (20.0 मेरा संस्करण है) यदि हम अंत में .change() विधि का उपयोग करते हैं।

+0

.prop() विधि का उल्लेख करने के लिए धन्यवाद। मेरे पास यहां एक बग था क्योंकि मैं .prop() के बजाय .attr() का उपयोग कर रहा था, और विधि को बदल रहा था। –

+0

अच्छा :)। आपका स्वागत है। – mpoletto

5

मुझे ड्रॉपडाउन एचटीएमएल टैग के साथ एक ही समस्या हो रही थी। और समाधान मिला। .change(), .attr() और .prop() का उपयोग करते समय मैं क्या विश्लेषण करता हूं नीचे साझा किया जाता है।

  1. .change(): जब मैं, .change() मेरे मामले में अभ्यस्त काम में प्रयोग किया जाता है, तो यह विश्वसनीय नहीं है। ब्राउज़र संस्करण मुद्दा भी।
  2. .attr(): जब मैंने .attr() विधि/फ़ंक्शन का उपयोग किया, उदाहरण के लिए। $('#db_service option[value=1]').attr('selected', 'selected'); विश्लेषण: यह चयनित कोड के विकल्प का चयन सेट = चयनित जब मैंने सोर्स कोड देखा था। लेकिन स्क्रीन परिवर्तन पर दिखाई नहीं दे रहे हैं।
  3. .prop(): जब मैंने .prop() विधि/फ़ंक्शन का उपयोग किया, उदाहरण के लिए। $('#db_service option[value=1]').prop('selected', 'selected'); विश्लेषण: यह वांट ने चयनित टैग के विकल्प का चयन किया है जब मैंने सोर्स कोड देखा था। लेकिन स्क्रीन पर, परिवर्तन लागू हैं।

मेरे समाधान: दोनों .attr प्रयुक्त() और .prop() अधिक परिपूर्ण परिणाम

$('#db_service option[value=1]').attr('selected', 'selected'); $('#db_service option[value=1]').prop('selected', 'selected');