Question

我正在尝试创建一个包含四个选项的下拉列表，如果我选择第四个选项，我想创建一个文本框，以便我可以使用“$ _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>

Answer 1

如果您的第四个选项是：

<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();
})
})

Answer 2

这通常是通过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 site

找到更多信息

Answer 3

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

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

<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。

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

从下拉列表中选择选项后如何创建文本框？

3 个答案: