এইচটিএমএল কাস্টম মান প্রবেশ করার বিকল্পের সাথে নির্বাচন করুন

Question 1

আমি একটি ইনপুট ক্ষেত্র চাই যা ব্যবহারকারীরা কাস্টম পাঠ্য মান প্রবেশ করতে পারে বা ড্রপ ডাউন থেকে চয়ন করতে পারে। একটি নিয়মিত <select>শুধুমাত্র ড্রপ ডাউন বিকল্প দেয়।

আমি কীভাবে <select>গ্রহণযোগ্য কাস্টম মান করতে পারি ? যেমন: ফোর্ড?

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Question 2

এইচটিএমএল 5 এর একটি অন্তর্নির্মিত কম্বো বাক্স রয়েছে। আপনি একটি পাঠ্য inputএবং একটি তৈরি datalist। তারপরে আপনি এর মানটির সাথে listএকটিতে একটি বৈশিষ্ট্য যুক্ত করুন ।inputiddatalist

আপডেট: মার্চ 2019 পর্যন্ত সমস্ত বড় ব্রাউজার (বর্তমানে সাফারি 12.1 এবং আইওএস সাফারি 12.3 সহ) datalistএই কার্যকারিতার জন্য প্রয়োজনীয় স্তরে সহায়তা করে। বিস্তারিত ব্রাউজার সমর্থনের জন্য ক্যানিউজ দেখুন ।

দেখে মনে হচ্ছে:

<input type="text" list="cars" />
<datalist id="cars">
  <option>Volvo</option>
  <option>Saab</option>
  <option>Mercedes</option>
  <option>Audi</option>
</datalist>

স্নিপেট প্রসারিত করুন

Question 3

অ্যালেন সাকের সর্বশেষ জেএসফিডাল ফায়ারফক্সে আমার জন্য টগল করেনি, তাই আমি ভেবেছিলাম যে আমি একটি সাধারণ এইচটিএমএল / জাভাস্ক্রিপ্ট ওয়ার্কআউন্ড সরবরাহ করব যা ফর্মগুলির মধ্যে (জমা দেওয়ার বিষয়ে) সুন্দরভাবে কাজ করবে যেদিন পর্যন্ত সমস্ত ব্রাউজার / ডিভাইস দ্বারা ডেটালিস্ট ট্যাগটি গ্রহণ করা হয় না। আরও বিশদ বিবরণ এবং এটি ক্রিয়াতে দেখুন , এখানে যান: http://jsfiddle.net/6nq7w/4/ দ্রষ্টব্য: টগলিং ভাইবোনদের মধ্যে কোনও ফাঁকির অনুমতি দেবেন না!

<!DOCTYPE html>
<html>
<script>
function toggleField(hideObj,showObj){
  hideObj.disabled=true;        
  hideObj.style.display='none';
  showObj.disabled=false;   
  showObj.style.display='inline';
  showObj.focus();
}
</script>
<body>
<form name="BrowserSurvey" action="#">
Browser: <select name="browser" 
          onchange="if(this.options[this.selectedIndex].value=='customOption'){
              toggleField(this,this.nextSibling);
              this.selectedIndex='0';
          }">
            <option></option>
            <option value="customOption">[type a custom value]</option>
            <option>Chrome</option>
            <option>Firefox</option>
            <option>Internet Explorer</option>
            <option>Opera</option>
            <option>Safari</option>
        </select><input name="browser" style="display:none;" disabled="disabled" 
            onblur="if(this.value==''){toggleField(this,this.previousSibling);}">
<input type="submit" value="Submit">
</form>
</body>
</html>

Question 4

jQuery সমাধান!

ডেমো: http://jsfiddle.net/69wP6/2/

নীচে অন্য একটি ডেমো (আপডেট!)

আমার কিছু ক্ষেত্রে একই বিকল্পের প্রয়োজন ছিল যখন আমার কিছু নির্দিষ্ট বিকল্প ছিল এবং আমি চাই যে অন্য একটি বিকল্প সম্পাদনাযোগ্য হোক! এই ক্ষেত্রে আমি একটি লুকানো ইনপুট তৈরি করেছি যা নির্বাচনের বিকল্পটি ওভারল্যাপ করবে এবং এটি সম্পাদনযোগ্য হবে এবং এটিকে সমস্ত নির্বিঘ্নে কার্যকর করার জন্য jQuery ব্যবহার করবে।

আমি আপনাদের সবার সাথে ফিডাল শেয়ার করছি!

এইচটিএমএল

<div id="billdesc">
    <select id="test">
      <option class="non" value="option1">Option1</option>
      <option class="non" value="option2">Option2</option>
      <option class="editable" value="other">Other</option>
    </select>
    <input class="editOption" style="display:none;"></input>
</div>

সিএসএস

body{
    background: blue;
}
#billdesc{
    padding-top: 50px;
}
#test{
    width: 100%;
    height: 30px;
}
option {
    height: 30px;
    line-height: 30px;
}

.editOption{
    width: 90%;
    height: 24px;
    position: relative;
    top: -30px

}

jQuery

var initialText = $('.editable').val();
$('.editOption').val(initialText);

$('#test').change(function(){
var selected = $('option:selected', this).attr('class');
var optionText = $('.editable').text();

if(selected == "editable"){
  $('.editOption').show();


  $('.editOption').keyup(function(){
      var editText = $('.editOption').val();
      $('.editable').val(editText);
      $('.editable').html(editText);
  });

}else{
  $('.editOption').hide();
}
});

সম্পাদনা: কিছু সাধারণ ছোঁয়া ডিজাইন অনুযায়ী যুক্ত করা হয়েছে, যাতে লোকেরা স্পষ্টভাবে দেখতে পারে যে ইনপুটটি কোথায় শেষ!

জেএস ফিডল: http://jsfiddle.net/69wP6/4/

Question 5

আপনি সত্যিই পারবেন না। আপনার ড্রপ ডাউন এবং পাঠ্য বাক্স উভয়ই রাখতে হবে এবং সেগুলি ফর্মটি বাছাই বা পূরণ করতে হবে। জাভাস্ক্রিপ্ট ব্যতীত আপনি একটি পৃথক রেডিও বোতাম সেট তৈরি করতে পারেন যেখানে তারা ড্রপডাউন বা পাঠ্য ইনপুট চয়ন করে তবে এটি আমার কাছে অগোছালো বলে মনে হয়। কিছু জাভাস্ক্রিপ্টের সাহায্যে আপনি টোগল করতে পারবেন এক বা অন্যটিকে অক্ষম করুন যার উপর নির্ভর করে তারা বেছে নিন, উদাহরণস্বরূপ, ড্রপডাউনটিতে একটি 'অন্যান্য' বিকল্প রয়েছে যা পাঠ্য ক্ষেত্রকে ট্রিগার করে।

Question 6

যদি ডেটালিস্ট বিকল্পটি আপনার প্রয়োজনীয়তা পূরণ করে না, তবে সিলেক্ট 2 লাইব্রেরি এবং " ডায়নামিক অপশন তৈরি " দেখুন

$(".js-example-tags").select2({
  tags: true
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>


<select class="form-control js-example-tags">
  <option selected="selected">orange</option>
  <option>white</option>
  <option>purple</option>
</select>

স্নিপেট প্রসারিত করুন

Question 7

উপরের সমাধানগুলির মধ্যে একটি (@ মিকম্যাকুসা) ব্যবহার করে, আমি হুক্স ব্যবহার করে 16.8+ প্রতিক্রিয়াতে একটি কাজের প্রোটোটাইপ তৈরি করেছি।

https://codesandbox.io/s/heuristic-dewdney-0h2y2

আমি আশা করি এটি কাউকে সাহায্য করবে