Özel değer girme seçeneğiyle HTML seçim formu

Question 1

Kullanıcıların özel metin değeri girebilecekleri veya açılır menüden seçim yapabilecekleri bir giriş alanına sahip olmak istiyorum. <select>Yalnızca normal , açılır seçenekler sunar.

<select>Özel bir değeri nasıl kabul edebilirim ? Örneğin: Ford?

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

Question 2

HTML5'te yerleşik bir açılan kutu vardır. Bir metin inputve bir datalist. O zaman bir ekleme listiçin özellik inputdeğeri ile, idbir datalist.

Güncelleme: Mart 2019 itibarıyla tüm büyük tarayıcılar (artık Safari 12.1 ve iOS Safari 12.3 dahil) datalistbu işlevsellik için gereken seviyeyi desteklemektedir . Ayrıntılı tarayıcı desteği için caniuse'ye bakın .

Şöyle görünüyor:

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

Snippet'i genişlet

Question 3

Alen Saqe'nin en son JSFiddle'ı benim için Firefox'ta geçiş yapmadı, bu yüzden, veri uzmanı etiketinin tüm tarayıcılar / cihazlar tarafından kabul edildiği güne kadar formlar içinde (gönderimle ilgili olarak) güzelce işleyecek basit bir html / javascript geçici çözümü sunacağımı düşündüm. Daha fazla ayrıntı ve nasıl çalıştığını görmek için şu adrese gidin: http://jsfiddle.net/6nq7w/4/ Not: Geçiş yapan kardeşler arasında boşluk bırakmayın !

<!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 Çözümü!

Demo: http://jsfiddle.net/69wP6/2/

Aşağıda Başka Bir Demo (güncellendi!)

Sabit Seçeneklerim olduğunda ve bir başka seçeneğin düzenlenebilir olmasını istediğim bir durumda benzer bir şeye ihtiyacım vardı! Bu durumda, seçim seçeneğiyle örtüşecek ve düzenlenebilir olacak gizli bir girdi yaptım ve hepsinin sorunsuz çalışmasını sağlamak için jQuery'yi kullandım.

Keman çalmayı hepinizle paylaşıyorum!

HTML

<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>

CSS

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

Düzenleme: Tasarım açısından bazı basit dokunuşlar eklendi, böylece insanlar girdinin nerede bittiğini açıkça görebilir!

JS Fiddle: http://jsfiddle.net/69wP6/4/

Question 5

Gerçekten yapamazsınız. Hem açılır menüye hem de metin kutusuna sahip olmanız ve formu seçmelerini veya doldurmalarını sağlamanız gerekir. Javascript olmadan, açılır listeyi veya metin girişini seçtikleri ayrı bir radyo düğmesi kümesi oluşturabilirsiniz, ancak bu bana karmaşık geliyor. Bazı javascript'lerde, hangisini seçtiklerine bağlı olarak birini veya diğerini devre dışı bırakabilirsiniz, örneğin, açılır menüde metin alanını tetikleyen bir 'diğer' seçeneğine sahip olabilirsiniz.

Question 6

Veri listesi seçeneği gereksinimlerinizi karşılamıyorsa, Select2 kitaplığına ve " Dinamik seçenek oluşturma " ya bir göz atın.

$(".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>

Snippet'i genişlet

Question 7

Yukarıdaki çözümlerden birini (@mickmackusa) kullanarak, Hooks kullanarak React 16.8+ ile çalışan bir prototip yaptım.

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

Umarım birine yardımcı olur.