更改下拉菜单，在输入框中添加url参数

onchange dropdown add parameters to url in inputbox

本文关键字：添加 url 参数 输入 下拉菜单      更新时间：2023-09-26

我正在设计附属程序，其中每个用户都有自己的链接代码aka跟踪URL。我愿意添加额外的参数，它取决于下拉选择，这将是不同的着陆页。

。原始URL: 

http://www.google.com/tracker/blah1

如果用户从下面选择值，URL应该是这样的:

http://www.google.com/tracker/blah1/queryid/1

我使用这段代码在设置为只读的输入框中向最终用户显示URL。

<input size="100" type="text" value="<?=$url;?>" readonly> &nbsp;- &nbsp;<a  target="_blank" href="<?=$url;?>">Link</a></b>

会有两个像这样的下拉菜单

<select name="niche">
<option value="0" label="choose one">choose one</option>
<option value="/queryid/1" label="option 1">option 1</option>
<option value="/queryid/2" label="option 2">option 2</option>
<option value="/queryid/3" label="option 3">option 3</option>
<option value="/queryid/4" label="option 4">option 4</option>
<option value="/queryid/5" label="option 5">option 5</option>
<option value="/queryid/6" label="option 6">option 6</option>
</select>

通过选择选项1，它应该将/queryid/1添加到url的末尾。如果不选择，则不更改。

<select name="landingpage">
<option value="0" label="choose one">choose one</option>
<option value="/cid/1" label="landing 1">landing 1</option>
<option value="/cid/2" label="landing 2">landing 2</option>
</select>

通过选择着陆1将把/cid/1添加到URL的末尾。如果不选择，则不更改。

我该怎么做呢?

Update:更新当前使用htaccess重写规则的下拉列表的值。

更新:
我使用的是"Rishi Php""demo在这里http://jsfiddle.net/g6U4a/2/

但默认不显示SourceUrl默认情况下，它应该在框中显示源URL，但当用户更改下拉值时，它会显示源URL。我怎样才能做到这一点呢?

更新:
"圣人Php"修复了加载默认url的问题。下面是代码。http://jsfiddle.net/g6U4a/3/谢谢你们所有人。

别忘了在header中加上:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

取代
var SourceUrl = "http://www.google.com/?tracker=blah1";


var SourceUrl = "<?=$url;?>";

因此每个附属机构将有唯一的链接

试试这个…会有帮助的。*已更新的工作演示*

var SourceUrl = "http://www.google.com/?tracker=blah1";
var queryUrl = "";
var landingUrl = "";
$(function() {
  $('#querySelct').on('change', function () {
      if($(this).val() == 0) {
         queryUrl = "";
      } else {
          queryUrl = $(this).val();
      }
      MakeUrl();
      return false;
  });
    $('#landingSelect').on('change', function () {
      if($(this).val() == 0) {
         landingUrl = "";
      } else {
         landingUrl = $(this).val();
      }
     MakeUrl();
     return false;
  });
});
function MakeUrl() {
    var finalUrl = SourceUrl + queryUrl + landingUrl;
   $('#urlBox').val(finalUrl);
  $('#MyLink').attr('href', finalUrl);
}

您可以使用getElementById从<select>字段中获取值，并将它们设置到您的文本字段中。

演示:

http://jsfiddle.net/g6U4a/1/

<select id="queryid">
<option value="0" label="choose one">choose one</option>
<option value="&queryid=1" label="option 1">option 1</option>
<option value="&queryid=2" label="option 2">option 2</option>
<option value="&queryid=3" label="option 3">option 3</option>
<option value="&queryid=4" label="option 4">option 4</option>
<option value="&queryid=5" label="option 5">option 5</option>
<option value="&queryid=6" label="option 6">option 6</option>  
</select>
<br>
<select id="cid" name="landingpage">
<option value="0" label="choose one">choose one</option>
<option value="&cid=1" label="landing 1">landing 1</option>
<option value="&cid=2" label="landing 2">landing 2</option>
</select>
<input type="button" id="change" value="Create URL" onclick="createUrl()" /><br>
<input type="text" id="result" placeholder="placeholder" readonly><br>
JAVASCRIPT

function createUrl() {
    var google = "http://www.google.com/";
    document.getElementById("result").value = google + document.getElementById("queryid").value +  document.getElementById("cid").value;
}

你可以这样做:

<select id="yourSelect" name="landingpage">
<option value="" label="choose one">choose one</option>
<option value="www.yourdomain.com&cid=1" label="landing 1">landing 1</option>
<option value="www.yourdomain.com&cid=2" label="landing 2">landing 2</option>
</select>

$(function(){
  $('#yourSelect').on('change', function () {
      var url = $(this).val();
      if (url) {
          window.location = url;
      }
      return false;
  });
});

给选择框

var urlToAppend1=$('#nicheId :selected').val();
originalurl='http://www.google.com/?tracker=blah1';
var url='';
url+=originalurl;
url+=urlToAppend;

试一试

$(function(){
        $('select').change(function() {
            var arr = new Array();
            $('select option:selected').each(function(){
                var value = $(this).val();
                if(value != "0"){
                    arr.push($(this).val());
                }
            });
            // selected value are now concatenating here.
            var str = arr.join('');
            alert(str);
        });
    });
相关文章：