Question

我有2个selects：月份和年份。当用户选择年份和月份时，我要使用选择项生成的查询字符串重定向到同一页面。

这就是我所做的：

<div id="custom-select1" class="custom-select" style="width:200px;">
       <select name="month" onchange="if (this.value) window.location.href=this.value">
            <option value="0">Select Month:</option>
            <option value="?date_from={value-from-year-select}-01-01&date_to={value-from-year-select}-01-31&courses=on&events=on">January</option>
            <option value="..">February</option>
            <option value="..">March</option>
            <option value="..">April</option>
            <option value="..">May</option>
            <option value="..">June</option>
            <option value="..">July</option>
            <option value="..">August</option>
            <option value="..">September</option>
            <option value="..">Octomber</option>
            <option value="..">November</option>
            <option value="..">December</option>
        </select>
    </div>
    <div class="custom-select" style="width:200px;">
        <select name="year" >
                <option value="2000">Select Year:</option>
                <option value="2018">2018</option>
                <option value="2019">2019</option>
                <option value="2020">2020</option>
                <option value="2021">2021</option>
                <option value="2022">2022</option>
                <option value="2023">2023</option>
        </select>
    </div>

如何替换{value-from-year-select}以获得所选year的值？

Answer 1

我本来会选择使用jquery来捕获更改事件（这正是我所习惯的）。但是我的猜测是，您想保留原始的JS方法，可以用javascript编写一个事件监听器，而不使用onchange属性。但是这里有一个解决方案，可以保持您现在的工作方式。只需将javascript添加到DOM中的脚本标签中即可。

function customSelectChange() {
    var year = document.getElementsByName("year");
    var month = document.getElementsByName("month");
    if(year[0].value !== "0" && month[0].value !== "0"){
        // DO your redirect
            alert(year[0].value+'-'+month[0].value);
    }
}

https://jsfiddle.net/4d9phtgv/

Answer 2

有延迟

const month = document.getElementById('month');
const year = document.getElementById('year');

function handleChange() {
  if (month.value && year.value) {
    const urlSearch = new URLSearchParams();
    urlSearch.append('month', month.value);
    urlSearch.append('year', year.value);
    console.log(urlSearch.toString());
  }
}

<select onchange="handleChange()" name="month" id="month">
  <option value="">Choice month</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
  <option value="11">11</option>
  <option value="12">12</option>
</select>
<select onchange="handleChange()" name="year" id="year">
  <option value="">Choice year</option>
  <option value="2001">2001</option>
  <option value="2002">2002</option>
  <option value="2003">2003</option>
  <option value="2004">2004</option>
  <option value="2005">2005</option>
  <option value="2006">2006</option>
  <option value="2007">2007</option>
  <option value="2008">2008</option>
  <option value="2009">2009</option>
  <option value="2010">2010</option>
  <option value="2011">2011</option>
  <option value="2012">2012</option>
</select>

Answer 3

您可以使用表格并将其提交以刷新包含信息的页面，添加额外的字段以使用隐藏的输入。

monthEnd = function(year, month) {
 
	   date = new Date(year, month - 1, 1);
  
     var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);
	   return lastDay.getDate();
     }

     appendHidden = function(formId, name, value) {
	$('#' + formId).append('<input type="text" name="' + name + '" class="hidden" value="' + value + '" />');
     }

     begining = function() {
	year = $('#selectYear').val();
	month = $('#selectMonth').val();	
	
	return year + '-' + month + '-' + '1'
     }

     end = function() {
        year = $('#selectYear').val();
	month = $('#selectMonth').val();
	
	return year + '-' + month + '-' + monthEnd(parseInt(year), parseInt(month));
     }

     $( document ).ready(function() {
	months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

	for(i=0; i< months.length; i++) {
		$('#selectMonth').append('<option value="' + (i + 1) + '">' + months[i] + '</option>');
	}


	for(y=2000; y<= 2023;y++) {
		$('#selectYear').append('<option value="' + y + '">' + y + '</option>');
	}


	$('#selectMonth').on('change', function() {
	   appendHidden('form', 'courses', 'on');
           appendHidden('form', 'events', 'on');
	   appendHidden('form', 'date-from', begining());
	   appendHidden('form', 'date-from', end());
           $('#selectYear').remove();
	   $('#selectMonth').remove();
	   //$('#form').submit(); Uncomment this line to submit and refresh
     alert($('#form').serialize())
	});



});

.hidden {
	display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form" action="" method="GET">
	  <div id="custom-select1" class="custom-select" style="width:200px;" >
	      <select id="selectMonth" name="month" >       
	      </select>
	  </div>
	  <div class="custom-select" style="width:200px;">
	       <select id="selectYear" name="year" ></select>
	  </div>
</form>

javascript：使用selects中的查询字符串刷新同一页面

3 个答案: