एचटीएमएल

  Select Database:
  <select class="dropdown" id="alphalist">   
         <option value="a" selected> A </option>   
         <option value="b"> B </option>
         <option value="c"> C </option>
  </select> 
  <input type="text" class="c1" id="id1" placeholder="Search full details about Database A"/>

यहां मैंने एक ड्रॉप डाउन मेनू (विकल्प ए, बी और सी के साथ) और प्लेसहोल्डर के साथ 'डेटाबेस ए के बारे में पूर्ण विवरण खोजें' के रूप में एक खोज बार बनाया है।

अब मुझे प्लेस होल्डर टेक्स्ट को 'डेटाबेस बी के बारे में पूर्ण विवरण खोजें' के रूप में बदलने की जरूरत है जब विकल्प बी चुना जाता है और विकल्प सी प्लेसहोल्डर टेक्स्ट को 'डेटाबेस सी के बारे में पूर्ण विवरण खोजें' में बदला जाना चाहिए।

क्या प्लेसहोल्डर टेक्स्ट के एक हिस्से को बदलना संभव है यानी यदि विकल्प बी चुना जाता है, तो प्लेसहोल्डर टेक्स्ट को केवल 'ए' टेक्स्ट को 'बी' से बदलकर 'डेटाबेस बी के बारे में पूर्ण विवरण खोजें' में बदल दिया जाता है। कृपया मुझे jQuery कोड के साथ मदद करें।

0
Eoin 20 जुलाई 2020, 00:49

1 उत्तर

सबसे बढ़िया उत्तर

एक तरीका यह है कि टेम्प्लेट मान को होल्ड करने के लिए डेटा एट्रिब्यूट का उपयोग किया जाए और एक प्लेसहोल्डर कैरेक्टर का उपयोग किया जाए जिसे आप <select> बदलते समय स्ट्रिंग रिप्लेस () का उपयोग कर सकते हैं।

फिर एक परिवर्तन ईवेंट हैंडलर के अंदर विशेषता को बदलें

$('#alphalist').change(function(){
    const dbText = $(this).find(':selected').text();
    
    $('#id1').attr('placeholder', function(){
        return $(this).data('placeholder').replace('_', dbText)
    });
  // trigger change on page load to set initial placeholder
}).change()
input{width:100%}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Select Database:
  <select class="dropdown" id="alphalist">   
         <option value="a" selected> A </option>   
         <option value="b"> B </option>
         <option value="c"> C </option>
  </select> 
  <br/> <br/> <br/>
  <input type="text" class="c1" id="id1" data-placeholder="Search full deatils about Database _"/>
1
charlietfl 20 जुलाई 2020, 01:06