在下拉菜单中更改所选的选项值

Question

My dropdown looks like,

    <select name="speed" id="ddlCustomer" class="form-control select-basic">
    <optgroup label="CustomerId&nbsp;&nbsp;OrderDate&nbsp;&nbsp;&nbsp;&nbsp;SupplyDate &nbsp;&nbsp;&nbsp;&nbsp;Supplier">
    <option value="1011_2">1011&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2015-12-18 &nbsp;&nbsp;&nbsp;2015-12-22&nbsp;&nbsp;&nbsp;ABC</option>
        <option value="1011_2">1034&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2015-12-23 &nbsp;&nbsp;&nbsp;2015-12-28&nbsp;&nbsp;&nbsp;XYZ</option>
    </optgroup>
</select>

Currently the dropdown shows options like "1011 2015-12-18 2015-12-22 ABC", that is fine but when user selects an option, I need to show only "CustomerId" ie, 1011 in this case.

Your help is really appreciated. Thanks

---

Added script for focusout

customSelect.focusout(function () {
                                customSelectOptions.each(function (options) {
                                    if ($(this).is(':selected')) {

                                        $(this).text($(this).attr('value').split('_')[0]);
                                        $(this).blur();
                                    }
                                });



                            });

Answer 1

 var states = []; var customSelect = $('#ddlCustomer'); var customSelectOptions = customSelect.children().children(); // Get each state then push them to the array // Initial state declaration customSelectOptions.each(function() { var state = $(this).text(); states.push({ state: state }); if ($(this).is(':selected')) { $(this).text($(this).attr('value').split('_')[0]); } }); // On focus, always retain the full state name customSelect.on('focus', function() { customSelectOptions.each(function(index) { $(this).text(states[index].state); }); // On change, append the value to the selected option $(this).on('change', function() { customSelectOptions.each(function(options) { if ($(this).is(':selected')) { $(this).text($(this).attr('value').split('_')[0]); } }); // Un-focus select on finish $(this).blur(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="speed" id="ddlCustomer" class="form-control select-basic"> <optgroup label="CustomerId&nbsp;&nbsp;OrderDate&nbsp;&nbsp;&nbsp;&nbsp;SupplyDate &nbsp;&nbsp;&nbsp;&nbsp;Supplier"> <option value="1011_2">1011&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2015-12-18 &nbsp;&nbsp;&nbsp;2015-12-22&nbsp;&nbsp;&nbsp;ABC</option> <option value="1034_2">1034&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2015-12-23 &nbsp;&nbsp;&nbsp;2015-12-28&nbsp;&nbsp;&nbsp;XYZ</option> </optgroup> </select> 

Answer 2

Try like this.You have use regex with text value of selected option.

  var ddlCustomer = document.querySelector('#ddlCustomer'); ddlCustomer.addEventListener('change',function(){ text = $(this).find("option:selected").text(); var value = text.match(/[0-9]+/); $(this).find("option:selected").text(value); alert(value); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="speed" id="ddlCustomer" class="form-control select-basic"> <optgroup label="CustomerId&nbsp;&nbsp;OrderDate&nbsp;&nbsp;&nbsp;&nbsp;SupplyDate &nbsp;&nbsp;&nbsp;&nbsp;Supplier"> <option value="1011_2">1011&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2015-12-18 &nbsp;&nbsp;&nbsp;2015-12-22&nbsp;&nbsp;&nbsp;ABC</option> <option value="1011_2">1034&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2015-12-23 &nbsp;&nbsp;&nbsp;2015-12-28&nbsp;&nbsp;&nbsp;XYZ</option> </optgroup> </select> 

See fiddle here https://jsfiddle.net/88cozeaz/1/

Answer 3

    document.getElementById('#ddlCustomer').onchange = function() {

      var option = this.options[this.selectedIndex];
      option.setAttribute('data-text', option.text);
      option.text =$(this).val();

      // Reset texts for all other but current
      for (var i = this.options.length; i--; ) {
        if (i == this.selectedIndex) continue;
        var text = this.options[i].getAttribute('data-text');
        if (text) this.options[i].text = text;
      }
    };