Change selected option value in dropdown

445
January 30, 2017, at 4:15 PM

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" i.e, 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;
      }
    };
Rent Charter Buses Company
READ ALSO
Wordpress permalinks GET and POST report url 404 while I can access the URL from browser

Wordpress permalinks GET and POST report url 404 while I can access the URL from browser

I have NGINX server with added code on location/ in the configuration file for the websiteI have the latest versions of WordPress and WooCommerce

361
Javascript and the twitter API

Javascript and the twitter API

Is it possible to have a Javascript only solution for querying the Twitter API? Trying to find a solution for this is finding a needle in a haystack

448
I want to use Bootstrap Modal buttons to return results on click event

I want to use Bootstrap Modal buttons to return results on click event

My aim is to override the jquery confirm() function with `function

433