javascript - 创建自定义 URL

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，例如，选择美洲，第二个下拉列表应该只显示加拿大和美国，点击衣服，应该出现一个段落并有“我们”/zh/shop/clothes/index.html”将实际页面放在这些选择下方会很棒，我希望我足够清楚，提前致谢。

Answer 1

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

// 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);
    });
});

<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>