Need changer select options help

JavaScript
1

Here is the code for example

<select id="cur">
    <option value="dollar">Dollar</option>
    <option value="euro">Euro</option>
    <option value="ruble">Ruble</option>
    <option value="shekel">Shekel</option>
</select>
<select id="dollar">
    <option value="10">10$</option>
    <option value="20">20$</option>
    <option value="30">30$</option>
</select>
<select id="euro">
    <option value="12">12€</option>
    <option value="45">45€</option>
    <option value="49">49€</option>
</select>
<select id="ruble">
    <option value="454">454</option>
    <option value="489">489</option>
    <option value="877">877</option>
</select>
<select id="shekel">
    <option value="30">30</option>
    <option value="50">50</option>
    <option value="100">100</option>
</select>
<br />
<span>Selected:</span>

If quest or user come from language EN, its will show cur dollar selected. Ru - ruble and other.
Now i need when selected CUR, show second select with options for this cur. And value like Dollar - 20$ .

And if it will not a problem, i need this code to work with AJAX, like if select first cur, its take info from curs.php?cur=dollar , if euro from curs.php?cur=euro etc… And in the curs.php will be the second select options… Thanks
-------------------------- edit ---------------------
Here is simple code that i do now, (but not checked). It will work like this or maybe correct?

$('#cur').change(function () {
    var curSelected = $('select#cur').find('option:selected').val();
    $.ajax({
        url: 'curs.php?cur=' + curSelected,
        type: 'post',
        cache: false,
        data: curSelected,
        success: function (data) {
            $('#show_options').html(data);
        }
    });
    return false;
});
1 Like
2

How are you determining your user’s locale?

3

subdomains like (ru.site.com , en.site.com and other) + with .htaccess (RewriteCond %{HTTP:Accept-Language} ^en [NC])

4

So depending on which sub-domain a user is accessing the page from, you want the appropriate currency to be selected in the first drop down.

E.g. en.site.com:

<select id="cur">
    <option value="dollar" selected>Dollar</option>
    <option value="euro">Euro</option>
    <option value="ruble">Ruble</option>
    <option value="shekel">Shekel</option>
</select>

or ru.site.com:

<select id="cur">
    <option value="dollar">Dollar</option>
    <option value="euro">Euro</option>
    <option value="ruble" selected>Ruble</option>
    <option value="shekel">Shekel</option>
</select>

Then, you want to display localized prices in the second drop down, depending on which currency is selected in the first:

e.g. first drop down set to “Dollar”:

<select id="amount">
    <option>Choose amount</option>
    <option value="10">10$</option>
    <option value="20">20$</option>
    <option value="30">30$</option>
</select>

or set to “Ruble”:

<select id="amount">
    <option>Choose amount</option>
    <option value="454">454</option>
    <option value="489">489</option>
    <option value="877">877</option>
</select>

If the user changes the currency in the first drop down, you want the values in the second drop down to update accordingly.

Did I get that right?

5

Yes, because maybe user from Russia, but use english version of windows.

Maybe if you know php, this will help, this is my array file config. That will show the correct currency and amount.

$names = array('rub' => $lang['PRIZETABLE_RUBLE'],'usd' => $lang['PRIZETABLE_DOLLAR'],'eur' => $lang['PRIZETABLE_EURO'],'nis' => $lang['PRIZETABLE_SHEKEL']);
$bets =  array('rub' => array(10.00,20.00,30.00,50.00,70.00,100),
               'usd' => array(0.20,0.40,0.50,0.80,1.25,1.75),
               'eur' => array(0.15,0.30,0.40,0.65,1.00,1.50),
	       'nis' => array(0.75,1.00,2.00,3.00,5.00,7.00));
6

There are a number of approaches you could use to tackle this.

If you have a small number of prices and currencies, you could echo them to your page and use JavaScript to update the second drop down, whenever the value in the first drop down changes.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Dependent Select</title>
  </head>
  <body>
    <select id="cur">
      <option value="en">Dollar</option>
      <option value="eu">Euro</option>
      <option value="ru">Ruble</option>
      <option value="sh">Shekel</option>
    </select>

    <select id="amount"></select>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
      function updateDependent(){
        var c = $currencySelect.val(),
            s = master[c].symbol,
            vals = master[c].values;

        $amountSelect.empty();
        $.each(vals, function(){
          $('<option/>', { value : this }).text(s + this).appendTo($amountSelect);
        });
      }

      var subDomain = window.location.host.split('.')[0] || "ru",
        master = {
          "en": {
            "symbol": "$",
            "values": [10, 20, 30]
          },
          "eu": {
            "symbol": "€",
            "values": [12, 45, 49]
          },
          "ru": {
            "symbol": "",
            "values": [454, 489, 877]
          },
          "sh": {
            "symbol": "",
            "values": [30, 50, 100]
          }
        },
        $currencySelect = $("#cur"),
        $amountSelect = $("#amount");

      $currencySelect.on("change", updateDependent);
      $currencySelect.val(subDomain).trigger("change");
    </script>
  </body>
</html>

Simple demo:

Note: I initialized the first select to “ru”. On your site, uncomment the previous line to have it initialize to the value of the current subdomain.

2 Likes
7

Wow, thank you very much! Work perfect!

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.