CODEWITHSUNDEEP
phpjavascriptjqueryajax
dom
dom

Reputation: 356

how to get two values from single select

hi so as the title implies im trying to get two values from a select element.

what i have all ready set up is two select elements which upon selection of the first select filters the second, there are over 16000 items to filter on the second, i think i will probably need a better way to integrate this but anyway i need to get both the displayed name and the value from the select and create a second variable to hold the value so.

starting from the top this is the script that filters the values if anyone can point me in the direction of a good ajax tut to set all this up i would be greatfull this is my js

<script type="text/javascript">
//<![CDATA[
jQuery.fn.filterOn = function(selectFrom, values) {
    return this.each(function() {
        var select = this;
        var options = {};
$(select).find('option').each(function() {
    var $o = $(this), title = $o.attr('title');
    if (options.hasOwnProperty(title) === false) {
        options[title] = [];
    }
    options[title].push({ 'text': $o.text(), 'value': $o.val() });
});
$(select).data('options', options);
        console.log(selectFrom);
       $(selectFrom).change(function() {
    var $select = $(select),
        options = $select.empty().data('options')[$(this).val()];
    // options is now just an array of objects with value and text properties, so:
    $.each(options, function () {
        $('<option value="' + this.value + '">' + this.text + '</option>').appendTo($select);
    });
  }); 
  });
};

$(function() {
    $('#city').filterOn('#country', {
        'default': [],
        'LK':['LK'],'SY':['SY'],'KE':['KE'],'KH':['KH'],'MN':['MN'],'SN':['SN'],'JO':['JO'],'SE':['SE'],'GB':['GB'],'AT':['AT'],'IL':['IL'],'PY':['PY'],'JM':['JM'],'MX':['MX'],'CL':['CL'],'CA':['CA'],'BG':['BG'],'MC':['MC'],'PR':['PR'],'LB':['LB'],'EC':['EC'],'PW':['PW'],'GU':['GU'],'MK':['MK'],'RE':['RE'],'BW':['BW'],'LY':['LY'],'TG':['TG'],'TH':['TH'],'MY':['MY'],'ES':['ES'],'DK':['DK'],'DO':['DO'],'BZ':['BZ'],'NI':['NI'],'VE':['VE'],'LV':['LV'],'AZ':['AZ'],'MD':['MD'],'AE':['AE'],'MT':['MT'],'SZ':['SZ'],'YE':['YE'],'SV':['SV'],'MW':['MW'],'GF':['GF'],'BD':['BD'],'LI':['LI'],'SM':['SM'],'BY':['BY'],'MZ':['MZ'],'IR':['IR'],'PK':['PK'],'RU':['RU'],'MU':['MU'],'TW':['TW'],'PT':['PT'],'NG':['NG'],'GR':['GR'],'CH':['CH'],'KW':['KW'],'LU':['LU'],'CZ':['CZ'],'HR':['HR'],'AR':['AR'],'EG':['EG'],'CR':['CR'],'US':['US'],'LT':['LT'],'KZ':['KZ'],'RS':['RS'],'EE':['EE'],'SG':['SG'],'FM':['FM'],'AL':['AL'],'ML':['ML'],'UG':['UG'],'ZA':['ZA'],'MM':['MM'],'AU':['AU'],'FJ':['FJ'],'IT':['IT'],'AD':['AD'],'NO':['NO'],'BR':['BR'],'UY':['UY'],'GT':['GT'],'PF':['PF'],'SC':['SC'],'BB':['BB'],'ME':['ME'],'LA':['LA'],'CK':['CK'],'KY':['KY'],'GA':['GA'],'SA':['SA'],'VN':['VN'],'PH':['PH'],'KR':['KR'],'JP':['JP'],'VU':['VU'],'NZ':['NZ'],'TN':['TN'],'IE':['IE'],'SI':['SI'],'SR':['SR'],'FI':['FI'],'AW':['AW'],'NP':['NP'],'FO':['FO'],'SD':['SD'],'ID':['ID'],'CN':['CN'],'MV':['MV'],'UZ':['UZ'],'HK':['HK'],'DZ':['DZ'],'DE':['DE'],'OM':['OM'],'FR':['FR'],'SK':['SK'],'PL':['PL'],'BS':['BS'],'GP':['GP'],'CO':['CO'],'BO':['BO'],'UA':['UA'],'AN':['AN'],'TO':['TO'],'GE':['GE'],'ET':['ET'],'BM':['BM'],'CY':['CY'],'GM':['GM'],'MA':['MA'],'HU':['HU'],'HN':['HN'],'PE':['PE'],'RO':['RO'],'AM':['AM'],'NC':['NC'],'ZM':['ZM'],'IN':['IN'],'TZ':['TZ'],'NL':['NL'],'BE':['BE'],'TR':['TR'],'NA':['NA'],'GD':['GD'],'QA':['QA'],'IS':['IS'],'BH':['BH'],'ZW':['ZW'],'GI':['GI'],'CM':['CM']
    });
});

 //]]>
</script>

then i have two selects which are constructed with php from database tables

<select id="country" name="country">
 <option value="">---------</option>
 <option value="LK">Sri Lanka</option>
 <option value="SY">Syria</option>
 <option value="KE">Kenya</option>
 <option value="KH">Cambodia</option>
 <option value="MN">Mongolia</option>     
 <option value="SN">Senegal</option>
 <option value="PY">Paraguay</option>
 <option value="SE">Sweden</option>
</select>

<select id="city" name="city">
  <option value="3439389">Asuncion</option>
  <option value="3439352">Bella Vista</option>
  <option value="3439101">Ciudad Del Este</option>
  <option value="3438735">Encarnacion</option>
</select>

basically this is all passed with get across the pages this is what the query looks like:

&country=PY  &city=3439101

what i need to do is create another variable called citycode and give the city number to that and use the displayed text as the city value so it would look like this 

&country=PY &city=Ciudad Del Este  &citycode=3439101

but how can i create the field &citycode and assign the html option text as a value to the city variable?

thanks

Upvotes: 0

Views: 332

Answers (2)

Peter
Peter

Reputation: 16923

$('#country option:selected').val(); // returns LK
$('#country option:selected').text(); // returns Sri Lanka

$('#city option:selected').val(); // returns 3439389
$('#city option:selected').text(); // returns Asuncion

With this knowledge you can add hidden input to POST/GET request

Upvotes: 1

Mike Brant
Mike Brant

Reputation: 71384

Your best bet might to make a hidden filed called city that you use jQuery onchange event on the city select to populate the value into. You would then need to change the name of your city select to citycode.

Upvotes: 0

Related Questions