1

I'm looking to create a simple multiselect dropdown (with checkboxes) but when the user selects "Other," it changes to a text input field.

I found this solution by Alen Saqe that is almost what I'm looking for (just missing the checkbox multiselect!) that was previously in this thread - HTML select form with option to enter custom value

Here is his code below and demo - http://jsfiddle.net/69wP6/4/

Any ideas please on how to turn this into a multiselect dropdown?

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

Any help is much appreciated! Apologies for being such a novice!

Sarwat Hameed
  • 21
  • 1
  • 3
  • It is so great you added a reference thank you for that. For working with code for the future of your project, check out the insert code option in the answer text box or in the menu when you edit the question. It helps to see the exact code, or work from an html file. Just some suggestions. :) – Rachel McGuigan Mar 19 '20 at 22:09
  • Thanks @RachelMcGuigan! My first post so I'm still figuring out the best way to ask question so I appreciate the suggestions! – Sarwat Hameed Mar 20 '20 at 17:48

0 Answers0