一起使用<select>和</select> <input type =“text”/>

时间:2013-07-09 14:08:40

标签: php forms select input option

我正在尝试同时使用<select>字段和<input type='text'>字段以及$ _GET方法。基本上我希望有这样的东西:

<select>
    <option name='artist'>Artist</option>
    <option name='song'>Song</option>
</select>
<input type='text' name='value' />

然后希望将其重定向为?artist=value?song=value,具体取决于所选内容。我希望这是有道理的,任何帮助将不胜感激。

2 个答案:

答案 0 :(得分:2)

不,你不能这样做。不是直接的。

您应该将name属性附加到select元素。然后$_GET将包含your_select_name=option_value

然后只关联后端的$_GET['type']$_GET['value']

<form method="GET">
<select name="type">
    <option value='artist'>Artist</option>
    <option value='song'>Song</option>
</select>
<input type='text' name='value' />
</form>

<?php 
    echo $_GET['type']; // 'artist' or 'song'
    echo $_GET['value']; // value of text input

P.S。:如果你需要严格要求形成你的URL,你可以提供两个输入并装配一个简单的JS脚本,它将隐藏与你的选择选项无关的输入。

实际上,这个想法需要一点阐述:

<form method="GET">
    <select id='type'>
        <option name='artist'>Artist</option>
        <option selected name='song'>Song</option>
    </select>
    <input class='inp' id='song' type='text' name='song' />
    <input class='inp' style='display:none' id='artist' type='text' name='artist' />
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
    $('#type').change(function() {
         $('.inp').val('').hide().prop('disabled', true); // hide and clear both inputs
         $('#'+$('#type').val() ).prop('disabled', false).show(); //show input corresponding to your select
         // Note the prop('disabled') calls - you want to disable the unused input so it does not add an empty key to your query string.
    }
</script>

答案 1 :(得分:0)

我认为您应该将name属性放在<select>标记上。

<select name="Category">
    <option>Song</option>
    <option>Artist</option>
</select>
<input type="text" name="Value"/>

那么验证所选择的内容应该相当容易 例如(PHP):

if($_GET['Category'] == "Song")
{
    //Do stuff here with $_GET['Value']
}
else if($_GET['Category'] == "Artist")
{
    //Do stuuf here with $_GET['Value']
}