0
<script type="text/javascript">
var CountryVal;
var StateVal;
$(document).ready(function(){
    $('#ItemCountry').change(function(){
        CountryVal = this.value; // value of the select element
        $("#StateFeeder").html('<img src="/images/mapCountry/AU/ajax-loader.gif" class="IMG-Loading" />');
        $('#StateFeeder').load('/StateFeeder/StateFeeder-Buy.html #StateFeeder-'+CountryVal, function(){
            $('#ItemState').change(function(){
                StateVal = this.value; // value of the select element
                $("#CityFeeder").html('<img src="/images/mapCountry/AU/ajax-loader.gif" class="IMG-Loading" />');
                $('#CityFeeder').load('/Country/'+CountryVal+'/_'+CountryVal+'_suburbs.html #Suburbs-'+StateVal, function(){
                    $('#CityFeeder select').attr('size', '5');
                    $('#CityFeeder select').change(function(){  
                        this.form['CAT_Custom_221342'].value=$(this).val();
                    }); 
                });        
            })
        });
    });
});           
</script>

The Jquery above will load dropdown menu from other page into current page and pass value into another input field when user makes selection. The problem is, the option value taken from the #StateFeeder in remote page contains the below format:

<option value="Kabardino-BalkarRepublic">Kabardino-Balkar Republic</option>
<option value="Karachay-CherkessRepublic">Karachay-Cherkess Republic</option>
<option value="KareliaRepublic">Karelia Republic</option>
<option value="KomiRepublic">Komi Republic</option>
<option value="MariElRepublic">Mari El Republic</option>
<option value="MordoviaRepublic">Mordovia Republic</option>

the values above are nonstop capitalized words and I want them to be formated with spaces in between capital words like below (plz keep the "-" btw words)when they are loaded into the current page, when they are loaded, the values without space are used as id for the user to make the onchange action and then format it later. thank you very much:

<option value="Kabardino-Balkar Republic">Kabardino-Balkar Republic</option>
<option value="Karachay-Cherkess Republic">Karachay-Cherkess Republic</option>
<option value="Karelia Republic">Karelia Republic</option>
<option value="Komi Republic">Komi Republic</option>
<option value="Mari El Republic">Mari El Republic</option>
<option value="Mordovia Republic">Mordovia Republic</option>

1 Answer 1

2

I'd suggest:

$('option').attr('value', function(i, h) {
    return h.replace(/([a-z])([A-Z])/g, '$1 $2');
});

JS Fiddle demo.

This effectively looks for a lower-case letter ([a-z]) followed by an upper-case letter ([A-Z]) (matching each of the two letters, the parentheses wrapping each), using a regular expression in the replace(), and then replaces the lower-case letter (with itself) inserts a space and then the upper-case letter.

In the linked demo, the div following the select element shows the changed HTML of the options.

3
  • 2
    Damn, to late. But my solution just as a comparison: jsfiddle.net/f4ARM. But learned something new by your code, thanks :)
    – ThoKra
    Sep 4, 2012 at 1:20
  • thank you David, could you please advice on my case how should I insert your part into mine? I'm new to Jquery :P should I insert btw that two $('#CityFeeder select') lines ? Sep 4, 2012 at 1:30
  • 1
    I have absolutely no idea what the rest of your code's doing, but so long as you put this into a position where the value of the option elements are set and ready to be manipulated it'll work fine. I wouldn't, personally, wrap it in the change() method, but if you want to (and it works) then you can. But unless the values of the options are likely to change there's no need to amend them every time the/an element changes. Sep 4, 2012 at 1:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.