单选按钮选择将显示选择列表或文本字段，然后该值查询并显示在另一个文本字段中答案

【问题标题】：radio btn selection will show select list or text field, then that value querys and displays in another text field单选按钮选择将显示选择列表或文本字段，然后该值查询并显示在另一个文本字段中
【发布时间】：2012-11-02 07:31:28
【问题描述】：

I have a form that when selecting the radio button it will query a database and populate either a select list or change select to a textbox for user input.(mostly working - won't go back to select after textbox - not as现在很重要）

然后我希望它从选择或文本框中获取值并将其放入字符串变量中。然后我想我可以从那里拿走它。我希望。（我将使用字符串查询以获取其他信息以填充围兜号码）

这是我的 JS/php 一直在尝试的一切

$(document).ready(function () {
    var bibfield = "";

    $('#a1').change(function () {
        //$('#hiddenText').hide();  
        $('#hidden').empty();
        //$('#hidden').show();
        $.each(arrayShort, function (i, val) {
            $('#hidden').append('<option value="' + val + '">' + val + '</option>');
        });
    });

    $('#a2').change(function () {
        //$('#hiddenText').hide();
        $('#hidden').empty();
        //$('#hidden').show();
        $.each(arrayLong, function (i, val) {
            $('#hidden').append('<option value="' + val + '">' + val + '</option>');
        });
    });

    $('#a3').change(function () {
        //$('#hidden').hide();
        //$('#hiddenText')show();

        $('#hidden').replaceWith('<input name="hidden" id="hiddenText" type="text" size="26" >');

    });
})

这是我的表格

<input name="btn1" id="a1" type="radio" value="Radio button 1" />
<input name="btn1" id="a2" type="radio" value="Radio button 2" />
<input name="btn1" id="a3" type="radio" value="Radio button 3" />
<select id="hidden" name="hidden">
  <option selected></option>
</select>
<input type="text" name="sBib" />
<input type="text" name="eBib" />

如果选中 a1 或 a2，我需要填充选择，但如果选中 a3，则我需要用文本框替换选择但是然后填充变量 bibfield，以便我可以使用它进行查询。

对此很陌生，我已经筋疲力尽，无法直截了当，感谢所有帮助！！！

【问题讨论】：

标签： javascript jquery jquery-selectbox

【解决方案1】：

在这里，您将 hidden 替换为 hiddenText 并再次尝试找到已消失的 hidden 需要更正您的代码，如下所示，我将整个选择或输入替换为相同的 id="hidden"

$(document).ready(function () {
        var bibfield = "";
        // variable to indicate if select dropdown is available already otherwise create new
        var selectAvailable=true;
        $('#a1').change(function () {
            //$('#hiddenText').hide();  
            //$('#hidden').empty();
            //$('#hidden').show();
            $.each(arrayShort, function (i, val) {
                if(selectAvailable)
        {
        $('#hidden').append('<option value="' + val + '">' + val+ '</option>');
        }
        else
        {
                selectAvailable=true;
            $('#hidden').replaceWith('<select id="hidden" name="hidden">
                <option value="' + val + '">' + val + '</option></select>');
        }
            });
        });

        $('#a2').change(function () {
            //$('#hiddenText').hide();
           // $('#hidden').empty();
            //$('#hidden').show();
            $.each(arrayLong, function (i, val) {
            if(selectAvailable)
        {
            $('#hidden').append('<option value="' + val + '">' + val + '</option>');
        }
        else
        {
        selectAvailable=true;
            $('#hidden').replaceWith('<select id="hidden" name="hidden">
                <option value="' + val + '">' + val + '</option></select>');
        }

        });

        $('#a3').change(function () {
            //$('#hidden').hide();
            //$('#hiddenText')show();
           selectAvailable=false;
            $('#hidden').replaceWith('<input name="hidden" id="hidden" type="text" size="26" >');

        });
    });

【讨论】：