Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 72473

How can i make look fancy value inside text area content depends on selected values

$
0
0

In this form contains textarea and dropdown field. When I select multiple options from this dropdown that values are show inside this textarea and when i deselect options from dropdown they are removed from textarea except one last value How can i deselect the last value also,The value selected from the field should look decorative how i can be possible. The value inside text box look like this in the sample image attached enter image description here

var options = [
            {"text"  : "Option 1","value" : "Value 1"
            },
            {"text"  : "Option 2","value" : "Value 2"
            },
            {"text"  : "Option 3","value" : "Value 3"
            },
            {"text"  : "Option 4","value" : "Value 4"
            },
            {"text"  : "Option 5","value" : "Value 5"
            },
            {"text"     : "Option 6","value"    : "Value 6","selected" : true
            },
            {"text"  : "rrrr","value" : "Value 7"
            }
];
var selectBox = document.getElementById('multichecks');

for(var i = 0, l = options.length; i < l; i++){
  var option = options[i];
  selectBox.options.add( new Option(option.text, option.value, option.selected) );
}
$(document).ready(function() {
  $('#multichecks').multiselect({
    enableFiltering: true,
    enableCaseInsensitiveFiltering: true,
    filterPlaceholder: 'Search for something...',
    onChange: function test(){
      document.getElementById('test').value =  $('#multichecks').val().join(',')
      //document.getElementById('textbox').value = $('#multichecks').val().join(',')
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"><script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css"><!-- <input type="button" id = "btnAdd" onclick = "AddDropDownList()" value = "Add DropDownList" /> --><hr /><strong>Where Condition :</strong><div class = "newa" id = "newq"><select id = "multichecks" name = "UHG ID" multiple = "multiple" onclick = "test();"></select></div><hr /><div class = "news" id = "newd"><textarea id="test"></textarea></div><hr />

Viewing all articles
Browse latest Browse all 72473

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>