Question

使用以下代码：

<select id="data-values">
    <option value="">Select an option</option>
    <option value="1234567890">Option 1</option>
    <option value="0987654321">Option 2</option>
</select>

我正在获取此选项元素的值，并将其作为查询字符串附加到包含服务的数据属性的授权代码中（在分段或生产中，这将是不同的URL）：< / p>

URL1

<div id="data-service" data-src="http://example.com/json_data/">Stylized service data here to be refreshed with new authorization code append</div>

我需要使用jQuery将新的查询字符串和值附加到此url，使其看起来像

URL2

<div id="data-service" data-src="http://example.com/json_data/?auth_code=1234567890">New stylized service data refreshed because of new auth code</div>

如果用户选择新选项值时已存在auth_code，则需要将其替换为新值：

URL3

<div id="data-service" data-src="http://example.com/json_data/?auth_code=0987654321">New stylized service data refreshed because of new auth code</div>

更改此auth_code值将会从服务中公开新数据。

Answer 1

这样的事情会起作用：

Example Here

$('#data-values').on('change', function () {
    var url = "http://example.com/json_data/",
        value = this.value;

    if (value) {
        url += "?auth_code=" + value;
    }
    $('#data-service').attr('data-src', url);
});

..或没有jQuery：

Example Here

var select = document.querySelector('#data-values');
select.addEventListener('change', function () {
    var url = "http://example.com/json_data/",
        value = this.value;

    if (value) {
        url += "?auth_code=" + value;
    }
    document.querySelector('#data-service').dataset.src = url;
});

Answer 2

我会保存URL的原始值（因为它可能是由服务器端脚本生成的），然后在必要时附加查询字符串（注意转义值）：

jQuery(function($) {
    // take base url first
    var $service = $('#data-service'),
    baseServiceUrl = $service.data('src');

    $('#data-values').on('change', function() {
        var newUrl = baseServiceUrl;

        if (this.value.length) {
            newUrl += '?auth_code=' + encodeURIComponent(this.value);
        }
        $service
          .data('src', newUrl)
          .text(newUrl); // also change the element contents
    });
});

Demo

附加并替换data- *属性URL的查询字符串值

2 个答案: