0

我正在尝试创建一个包含四个选项的下拉列表，如果我选择第四个选项，我希望创建一个文本框，以便我可以使用“$_GET”获取在该框中键入的值

像这样的东西；

<select name="value">
<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
<option value="value3">Option 3</option>
<!-- And a 4th one -->
</select>

如果选择了第 4 个，应该会出现一个框，如下所示；

<input type="text" name="firstname">

编辑;

我当前的代码；

<script>
jQuery(function($){                      //calling the code inside braces when document loads and passing jQuery object as '$' parameter;
   $("select[name='sortby']").change(function(){        //binding an event that fires every time select value changes
      var select = $(this);              //caching select, which value was changed
      if(select.val() === "byDefindex"){     //checking if we selected the right option
          $("<input>").attr({type: "text", name: "defindex"}).appendTo(select.parent());   //creating new input element object, setting its value to "value4" and appending to select parent element or wherever you want it
      }
   });        
});
</script>




<form action="<?php $_PHP_SELF ?>" method="GET">

    Select:
    <br />
        <select name="sortby">
            <option value="playHours">Play Hours</option>
            <option value="lastLogin">Last Login</option>
            <option value="byDefindex">By Defindex</option>
        </select>
    <br />

    <input type="submit" />

</form>
4

3 回答 3

2

如果您的第四个选项是这样的：

<option value="value4">Option 4</option>

您可以使用 jQuery 来显示该字段。把你的领域放在一个<div>

<div id="field"><input type="text" name="firstname"></div>

现在，

<script type="text/javascript">
$(document).ready(function(){

$('input[name="value"]').change(function(){
var v = $('input[name="value"]').val();
if(v=="value4") $('#field').show();
else $('#field').hide();
})
})
于 2013-10-09T16:32:19.773 回答
1

这通常是通过 javascript 完成的；像这样（通过使用流行的 JavaScript 库，jQuery）：

jQuery(function($){                      //calling the code inside braces when document loads and passing jQuery object as '$' parameter;
   $("select[name='value']").change(function(){        //binding an event that fires every time select value changes
      var select = $(this);              //caching select, which value was changed
      if(select.val() === "value4"){     //checking if we selected the right option
          $("<input>").attr({type: "text", name: "firstname"}).appendTo(select.parent());   //creating new input element object, setting its value to "value4" and appending to select parent element or wherever you want it
      }
   });        
});

希望有帮助。你可以在这里找到更多jQuery 网站

于 2013-10-09T16:32:45.140 回答
0

我不确定这是您要问的，但您似乎想在选择列表中添加新行？

我经常做类似的事情来向列表添加新选项。第一个选项是“添加新记录”，如下所示：

<select name="value">
    <option value="-1">Add New Option</option>
    <option value="value1">Option 1</option>
    <option value="value2">Option 2</option>
    <option value="value3">Option 3</option>
</select>

请注意，“添加新”的值为 -1...您可以在此处放置任何内容，但它应该永远不会出现在其他选项中，因此您的 javascript 知道当它被选中时该做什么。

在选择框中添加一个“onchange”，如下所示：

<select name="value" onchange="if(this.value == -1) addOption(this);">

请注意，如果所选选项为 -1，则调用 javascript 函数。它引用自己（this），以便您的函数知道谁调用了它。

然后创建一个允许添加新选项的函数：

function addOption(theSelectElement){
    // create a text box, underneath the select box:
    var newInput=document.createElement('input');
    newInput.type='text';
    theSelectElement.parentNode.insertAfter(newInput,theSelectElement);
}

您需要向该函数添加更多代码，以便新的文本字段有一个名称，也许还有一个 ID。

希望这会有所帮助，或者至少为您指明正确的方向。

于 2013-10-09T16:58:31.817 回答