2009-08-18 16 views
5

को प्रतिबिंबित नहीं करता है जब मैंinnerHTML की जगह

document.getElementById('foo').innerHTML = document.getElementById('foo').innerHTML.replace("<option> one </option>", "<option> two </option>") ; 

innerHTML प्रतिस्थापित हो लेकिन यह ब्राउज़र में परिलक्षित नहीं होता है का उपयोग मैं इस

<div id="foo"> 
<select> 
<option> one </option> 
</select> 
</div> 

तरह HTML कुछ है।

अगर मैं आंतरिक HTML को अलर्ट करता हूं तो मैं देख सकता हूं कि यह अब बदला गया है लेकिन ब्राउज़र में यह अभी भी पुराना विकल्प दिखाता है।

क्या ब्राउज़र द्वारा इस परिवर्तन को पहचानने का कोई तरीका है?

अग्रिम धन्यवाद।

उत्तर

7

ठीक काम करता है को बदलने के लिए

Working Demo

संपादित की जरूरत है: आप आईई का उपयोग किया जाना चाहिए। आप उपयोग कर रहे हैं परीक्षण किया है और Firefox और IE 7 में काम कर

var foo = document.getElementById('foo'); 
var select = foo.getElementsByTagName('select'); 
select[0].options[0].text = ' two '; 
2

मुझे लगता है कि आप IE का उपयोग कर रहे हैं? समस्या यह है कि आपको IE में SELECTs को पॉप्युलेट करने के लिए नए विकल्प (...) का उपयोग करना होगा।

document.getElementsByTagName('select')[0].options[0]=new Option(' two '); 

संपादित करें:: इस तरह http://support.microsoft.com/kb/276228

3

बेहतर चयन टैग को एक आईडी देने के लिए और एक आइटम जोड़ने के लिए नए विकल्प का उपयोग करने: वहाँ एक Microsoft नॉलेजबेस इस बग के बारे में लेख है।

var sel =document.getElementById ("selectElementID"); 
var elOptNew = document.createElement('option'); 
elOptNew.text = 'Insert' + 2; 
elOptNew.value = 'insert' + 2; 
sel.options.add (elOptNew); 

आप Firefox 3.5 में मेरे लिए एक विकल्प

sel.options[indexNumber].text = 'text_to_assign'; 
sel.options[indexNumber].value = 'value_to_assign'; 
0

- आप एक नया विकल्प बनाने के लिए और तत्व में जोड़ने, या संशोधन मौजूदा विकल्प के पाठ

Working Demo की जरूरत replace जिसे रेगेक्स के पहले तर्क के रूप में आवश्यक है।

इस प्रयास करें:

document.getElementById('foo').innerHTML = document.getElementById('foo').innerHTML.replace(/<option> one <\/option>/, "<option> two </option>"); 

आप के लिए यह काम करता है?

+0

नहीं है, पहला तर्क भी एक सबस्ट्रिंग हो सकता है। इसके लिए डब्ल्यू 3 सी चश्मा चेकआउट करें। – jmishra

3

किसी चयन के आंतरिक HTML को सेट करना आईई में एक बग है। सुनिश्चित नहीं है कि उन्होंने इसे अभी तक 7 या 8 में तय किया है। यह आपके द्वारा दिए गए कुछ पाठों में कटौती करता है और इस प्रकार विकृत विकल्प हैं। इसलिए आपको बाहरी HTML सेट करना होगा जिसमें चयन शामिल है। चूंकि बाहरी HTML केवल आईई है (या था) मैं आमतौर पर select.parentNode.innerHTML का उपयोग करता हूं। और मैं चयन के लिए आईडी असाइन करता हूं। लेकिन चूंकि आप div के आंतरिक HTML को सेट कर रहे हैं, इसलिए आप पहले से ही कवर हो चुके हैं। वह सिर्फ एक एफवाईआई था।

मुझे लगता है कि आपकी असली समस्या यह है कि प्रतिस्थापन पहली तर्क के लिए नियमित अभिव्यक्ति की अपेक्षा कर रहा है। या विकल्प तत्व वह नहीं है जो आप उम्मीद करते हैं। आईई विकल्प नाम को कैपिटल कर सकता है और एक चयनित विशेषता जोड़ सकता है। स्ट्रिंग को बदलने की कोशिश करने से पहले आपको यह देखने के लिए आंतरिक HTML को सतर्क करना चाहिए। फिर मैं प्रतिस्थापन करने के लिए एक वैध नियमित अभिव्यक्ति का उपयोग करूंगा।आपको शायद बैकस्लैश के साथ स्लैश से बचना होगा। मुझे नहीं लगता कि आपको कोण ब्रैकेट से बचने की जरूरत है लेकिन मैं उस पर 100% नहीं हूं।

इसके अलावा मेरे अनुभव में डीओएम विधि (नया विकल्प) धीमा है। जब आपको बड़ी संख्या में विकल्पों को प्रतिस्थापित करना होता है तो यह काफी धीमा होता है। यदि आपको केवल एक या दो को प्रतिस्थापित करना है, तो आप डीओएम विधि का उपयोग कर सकते हैं।

+0

किसी ने आखिरकार मेरी समस्या (और समाधान) को सीधा तरीके से वर्णित किया। धन्यवाद! मैं बहुत खुश हूं, मैं आपके अन्य उत्तरों की जांच कर रहा हूं और देख सकता हूं कि इसके ऊपर दिए गए अपवॉट्स को क्या प्राप्त नहीं हुआ है। । । –

0

चेक इस

document.getElementById('foo').innerHTML.replace("<option> one </option>", "<option> two </option>") ; 

अगर यह ब्राउज़र को बदलने से काम नहीं कर रहा है।

1

एक समाधान मैं बाहर काम के रूप में इस प्रकार है

strHTML = "&nbsp;<option value=""1"">Text1</option>" 
strHTML = strHTML + "<option value=""15"">Text2</option>" 
strHTML = strHTML + "<option value=""17"">Text3</option>" 


document.getElementById("id-selectbox").innerHTML=strHTML; 
if(Browser=="Internet Explorer"){ 
    document.getElementById("id-selectbox").outerHTML=document.getElementById("id-selectbox").outerHTML; 
} 

एचटीएमएल स्ट्रिंग एक AJAX अनुरोध के द्वारा प्राप्त किया जा सकता है।

परिणाम यह है कि ब्राउजर अपने नए जोड़े गए विकल्पों के साथ चयन बॉक्स को फिर से लिख/प्रस्तुत करेगा।

नोटिस: & nbsp पहला विकल्प कोड preciding आप इस बाहर छोड़ देते हैं, पहला विकल्प अपने विकल्प टैग खो देंगे और वजह नया जोड़ा चयन-innerHTML में नहीं दिखाया जाएगा तो

संबंधित मुद्दे