Question

我是jQuery的新手，我需要根据一些内容创建URL，首先是1个下拉菜单，我可以选择一个区域，具体取决于区域，第二个下拉列表需要显示该区域的国家/地区，第二个下拉列表的每个选项都有一个值，该值将成为URL的一部分，在本例中为语言代码和国家/地区代码，然后选择每个href属性将成为URL的最后部分的链接列表，以及在文本或段落中显示最终的URL

<select name="region" id="region">
    <option value="none">Select a Region...</option>
    <option value="europe">Europe</option>
    <option value="asia">Asia</option>
    <option value="americas">Americas</option>
</select>

<select name="countries" id="country">
    <option value="none">Select a Country...</option>
    <option value="africa/en" class="europe">Africa - English</option>
    <option value="africa/fr" class="europe">Africa - French</option>
    <option value="at/de" class="europe">Austria</option>
    <option value="by/ru" class="europe">Belarus</option>
    <option value="be/nl" class="europe">Belgium - Dutch</option>
    <option value="bg/bg" class="europe">Bulgaria</option>
    <option value="au/en" class="asia">Australia</option>
    <option value="cn/zh" class="asia">China</option>
    <option value="hk/zh" class="asia">Hong Kong - Chinese</option>
    <option value="hk/en" class="asia">Hong Kong - English</option>
    <option value="in/en" class="asia">India</option>
    <option value="id/en" class="asia">Indonesia</option>
    <option value="ca/fr" class="americas">Canada</option>
    <option value="us/en" class="americas">US</option>
</select>

<div id="categories">
<ul style="float:left;width:230px;">
    <li><a href="/shop/clothes/index.html" target="_blank">Clothes</a></li>
    <li><a href="/shop/food/index.html" target="_blank">Food</a></li>
    <li><a href="/shop/electronics/index.html" target="_blank">Electronics</a></li>
    <li><a href="/shop/games/index.html" target="_blank">Video Games</a></li>
</ul>

点击li项应该返回最终的URL，例如，selectin Americas，第二个下拉列表应该只显示加拿大和美国，点击衣服，一个段落应该出现并且有“us / en /店/衣服/ index.html的” 将这些选项下面的实际页面放在一起会很棒，我希望我已经足够清楚了，先谢谢。

Answer 1

首先，您需要关注国家/地区下拉列表中的更改，然后相应地更改第二个选项。

$('select[name="region"]').change(function (event) {
  var countrySelect = $('select[name="countries"]');
  var region = event.target.value;

  // Reset the country select
  countrySelect[0].selectedIndex = 0;

  // Enable/disable the country select
  countrySelect.prop('disabled', region === 'none');

  // Show/hide the corresponding countries
  countrySelect.find('option').each(function (idx, elm) {
    if (elm.className.indexOf(region) > -1) {
      $(elm).show();
    } else {
      $(elm).hide();
    }
  });
});

然后，您需要调整链接

$('#categories a').each(function (idx, elm) {
  $(elm).click(function (event) {
    event.preventDefault();

    var countrySelect = $('select[name="countries"]')[0];
    if (countrySelect.selectedIndex <= 0) {
      alert('Please select a country first!');
    } else {
      // Change page to adjusted url
      window.location = countrySelect.value + $(elm).attr('href');
    }
  });
});

请参阅JSFiddle。

Answer 2

我会为这样的东西创建一个插件，以便它可以在其他地方重复使用：

＆＃13;

// option filtering plugin courtesy of Paolo Bergantino
// http://stackoverflow.com/questions/877328/jquery-disable-select-options-based-on-radio-selected-need-support-for-all-brow/878331#878331


// "trigger" is a selector for the element that will trigger the filter
// "seetings" are options for the plgin, in this case we use  {first:'none', dataAttr:'region'} 
jQuery.fn.filterOn = function(trigger,settings) {
    return this.each(function() {
        var first={};
        var select = this;
        var options = [];
          // get all of the orgiginal options 
          // if first option's region is set to our settings.first value
          // set it's info as our default selection/first option
          $(select).find('option').each(function (i, e) {
              if( i == 0 && $(this).data(settings.dataAttr) === settings.first){ 
                  first={
                    value: $(this).val(),
                    text: $(this).text(),
                    region: $(this).data(settings.dataAttr)
                  }
              }
              else{
                // get each option's value, text, and region ( region being: data-region="asia" for example )
                options.push({
                    value: $(this).val(),
                    text: $(this).text(),
                    region: $(this).data(settings.dataAttr)
                });
              }
        });
        // empty the select, store the options in a data attribute on the select, then load just the first, default option
        $(select).empty().data('options', options).data('first', first).append( $('<option>').text(first.text).val(first.value).data(settings.dataAttr, first.region) );
        // listen for changes from our trigger element
        $(trigger).change(function () {
            // if selected default option, filter the select to it's default 
            // first option's text must contain "..." 
            // not other option's text should contain "..."
            if ($(this).val() === settings.first){ 
                $(select).empty().append($('<option>').text(first.text).val(first.value).data(settings.dataAttr, first.region));
            } 
			else {
                // if selected a real option, clear the select box's options
                // then get the second select's original options from it's data attribute                
                var options = $(select).empty().data('options');
                // get the region form the trigger element's value
                var selectedRegion = $(this).val();
                // loop through each of the original options
                $.each(options, function (i) {
                    var option = options[i];
                     // if the option's region is the same as the selected region
                     // or if the option's region is equal to 'none' (our defualt option), add it back to the select element
                    if (selectedRegion === option.region || option.region === settings.first) {
                        $(select).append( $('<option>').text(option.text).val(option.value).data( settings.dataAttr, option.region) );
                    }
                });
		    }
        });
    });

};


$(function() {
    // call our plugin
    // {first:'none',dataAttr:'region'}  are settings for the plugin
    // first:'none' tells the plugin what the value of the first option should be so it can always find in int the group later 
    // dataAttr:'region' tells the plugin we want to filter the options by their 'data-region' value
    $('#country').filterOn('#region', {first:'none',dataAttr:'region'} );
    
    // when clicking link, add current selection to url then display it
    $('#categories li a').click(function(e){
        e.preventDefault();
        var h = $(this).attr('href');
        var c = $('#country').val();
        var myUrl = c !== 'none' ? c + h : 'Please select a country!';
        $('#showlinks').html(myUrl);
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="region" id="region">
    <option value="none">Select a Region...</option>
    <option value="europe">Europe</option>
    <option value="asia">Asia</option>
    <option value="americas">Americas</option>
</select>

<select name="countries" id="country">
    <option value="none" data-region="none">Select a Country...</option>
    <option value="africa/en" data-region="europe">Africa - English</option>
    <option value="africa/fr" data-region="europe">Africa - French</option>
    <option value="at/de" data-region="europe">Austria</option>
    <option value="by/ru" data-region="europe">Belarus</option>
    <option value="be/nl" data-region="europe">Belgium - Dutch</option>
    <option value="bg/bg" data-region="europe">Bulgaria</option>
    <option value="au/en" data-region="asia">Australia</option>
    <option value="cn/zh" data-region="asia">China</option>
    <option value="hk/zh" data-region="asia">Hong Kong - Chinese</option>
    <option value="hk/en" data-region="asia">Hong Kong - English</option>
    <option value="in/en" data-region="asia">India</option>
    <option value="id/en" data-region="asia">Indonesia</option>
    <option value="ca/fr" data-region="americas">Canada</option>
    <option value="us/en" data-region="americas">US</option>
</select>

<div id="categories">
<ul style="float:left;width:230px;">
    <li><a href="/shop/clothes/index.html" target="_blank">Clothes</a></li>
    <li><a href="/shop/food/index.html" target="_blank">Food</a></li>
    <li><a href="/shop/electronics/index.html" target="_blank">Electronics</a></li>
    <li><a href="/shop/games/index.html" target="_blank">Video Games</a></li>
</ul>
</div>
<br>
<p id="showlinks"></p>

＆＃13;

创建自定义URL

2 个答案: