在下面的表单中,我在url后面的选择框中有选项。但是,我想改为提交按钮,因为用户将输入用户名并选择下拉值。
<section id="search">
<form method="get" action="index.php" id="main-form">
<div class="summoner_search">
<input id="summoner" name="summoner" type="text" placeholder="Summoner"/>
<input id="region" name="region" type="hidden" value="<?php echo $region ?>"/>
<input id="form" name="form" type="hidden" value="true"/>
<select id="regions" onchange="location = this.options[this.selectedIndex].value;">
<option value="index.php?region=br">BR</option>
<option value="index.php?region=eune">EUNE</option>
<option value="index.php?region=euw">EUW</option>
<option value="index.php?region=kr">KR</option>
<option value="index.php?region=lan">LAN</option>
<option value="index.php?region=las">LAS</option>
<option value="index.php?region=na">NA</option>
<option value="index.php?region=oce">OCE</option>
<option value="index.php?region=ru">RU</option>
<option value="index.php?region=tr">TR</option>
</select>
<input type="submit" value="Submit" style="display:none;"/>
</div>
<a href="index.php" alt="reset">Reset Values</a>
</form>
</section>
目前,下拉列表会刷新页面,并且必须重新输入召唤师名称。如果我可以把它放在提交按钮上,这样值就会在提交后附加,我认为这应该更好,但我不知道如何做到这一点。
我的另一个附带问题是,有人能告诉我正确的方向,根据访问的国家自动加载下拉值吗?
谢谢Alex
如果您想避免在select的onchange事件触发后再次输入调用器值,那么您可以将调用器输入的值附加到onchange事件中调用的URL,类似于以下代码:
<section id="search">
<form method="get" action="index.php" id="main-form">
<div class="summoner_search">
<input id="summoner" name="summoner" type="text"
placeholder="Summoner"
value="<?php echo htmlentities($_GET['summoner'], ENT_QUOTES); ?>"
/>
<input id="region" name="region" type="hidden"
value="<?php echo htmlentities($region, ENT_QUOTES); ?>"
/>
<input id="form" name="form" type="hidden" value="true"/>
<script>
function load(select) {
var summoner = document.getElementById('summoner');
var url = select.options[select.selectedIndex].value;
if (summoner.value) {
url += '&' + encodeURIComponent(summoner.value);
}
window.location.href = url;
}
</script>
<select id="regions" onchange="load(this);">
<option value="index.php?region=br">BR</option>
<option value="index.php?region=eune">EUNE</option>
<option value="index.php?region=euw">EUW</option>
<option value="index.php?region=kr">KR</option>
<option value="index.php?region=lan">LAN</option>
<option value="index.php?region=las">LAS</option>
<option value="index.php?region=na">NA</option>
<option value="index.php?region=oce">OCE</option>
<option value="index.php?region=ru">RU</option>
<option value="index.php?region=tr">TR</option>
</select>
<input type="submit" value="Submit" style="display:none;"/>
<a href="index.php" alt="reset">Reset Values</a>
</div>
</form>
</section>
如果我可以把它放在提交按钮上,这样值就会在提交后附加,我认为这应该更好,但我不知道如何做到这一点。
你的意思是,当点击提交按钮时,你想发送一个召唤师参数(你的召唤师输入值)和一个区域参数(你区域选择的值)吗?然后您可以简单地将您的选择更改为:
<select name="region">
<option value="br">BR</option>
<option value="eune">EUNE</option>
....
</select>
然后你的index.php将在发送表单时同时收到一个召唤器和一个区域值。
我的另一个附带问题是,有人能告诉我正确的方向,根据访问的国家自动加载下拉值吗?
你需要一个地理定位库。使用它可以从访问者的IP地址中检测其所在的区域。然后从一组可用区域中选择最接近访问者所在区域的区域,并将选择中的相关选项标记为selected
。