0

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

dom
  • 254
  • 1
  • 4
  • 18

2 Answers2

1
$('#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

Community
  • 1
  • 1
Peter
  • 16,453
  • 8
  • 51
  • 77
  • This still doesn't help him actually POST the data on the city name. If he wanted to POST the form in a normal manner, he would need to use a hidden field. If POSTing via AJAX, he could either use hidden field and `serialize` the whole form for POSTing or manually build the query string to be used. – Mike Brant Aug 28 '12 at 15:11
  • @MikeBrant [that's not problem at all](http://stackoverflow.com/questions/2530635/jquery-add-additional-parameters-on-submit-not-ajax) – Peter Aug 28 '12 at 15:21
  • @PeterSyzmkowski Yes, it is certainly easy enough to do, you might want to update your answer with this information as well. As it stands, the answer only tells him how to extract the values, not how to actually POST them. – Mike Brant Aug 28 '12 at 15:24
0

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.

Mike Brant
  • 70,514
  • 10
  • 99
  • 103