單選btn選擇將顯示選擇列表或文本字段，然后該值查詢並顯示在另一個文本字段中

Question

我有一種形式，當選擇單選按鈕時，它將查詢數據庫並填充選擇列表或將select更改為文本框以供用戶輸入（大多數情況下-在文本框后將不返回選擇-現在不那么重要了）

然后，我希望它從select或文本框中獲取值並將其放入字符串變量中。 然后，我想我可以從那里拿走它。 我希望。 （我將使用字符串查詢以獲取其他信息以填充圍嘴編號）

這是我的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以便可以查詢它 。

對此感到陌生，我非常疲憊，不能以為所有的幫助都值得贊賞！！！

Answer 1

在這里，您要用hiddenText替換hidden，然后再次嘗試查找已消失的hidden已經需要更正您的代碼，如下所示，在這里我用相同的id =“ hidden”替換了整個select或input

$(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" >');

        });
    });