当你有很多文本框时，如何从一个模态中只填充一个文本框

How to fill only one textbox from a modal when you have a lot of them

本文关键字：一个 文本 填充 模态 当你      更新时间：2023-09-26

我解释了我的问题，我有这样的代码：

 @Html.LabelFor(m => m.X.Y, new { @class = "col-sm-d col-sm-2 control-label" })
   <div class="col-sm-2">
       @Html.TextBoxFor(m => m.X.Y, new { @class = "form-control", @id = "X"})
   </div>
   <div class="col-sm-2">
       @Html.EnumDropDownListFor(m => m.X.Y, new { @class = "form-control", @id = "Dropdown1" })
   </div>
 @Html.LabelFor(m => m.X.Y, new { @class = "col-sm-d col-sm-2 control-label" })
   <div class="col-sm-2">
       @Html.TextBoxFor(m => m.X.Y, new { @class = "form-control", @id = "X_Y2"})
   </div>
   <div class="col-sm-2">
        @Html.EnumDropDownListFor(m => m.X.Y, new { @class = "form-control", @id = "Dropdown2" })
   </div>

此模式：

            <div id="myModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    Multiples
                </div>
                <div class="modal-body">
                    Valeur <input style="text-align:right;" type="text" id="Valeur"/><br />
                    Unité <input style="text-align:right;" type="text" id="Unite1" /><br />
                    Unité <input style="text-align:right;" type="text" id="Unite2" /><br />
                    Opérant (+) <input style="text-align:right;" type="text" id="Operand" /><br />
                    <br />
                    Valeur <input style="text-align:right;" type="text" id="Valeur2" /><br />
                    Unité <input style="text-align:right;" type="text" id="Unite3" /><br />
                    Unité <input style="text-align:right;" type="text" id="Unite4" /><br />
                    Opérant (+) <input style="text-align:right;" type="text" id="Operand2" /><br />
                    <br />
                    Valeur <input style="text-align:right;" type="text" id="Valeur3" /><br />
                    Unité <input style="text-align:right;" type="text" id="Unite5" /><br />
                    Unité <input style="text-align:right;" type="text" id="Unite6" /><br />
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-warning" data-dismiss="modal">
                        Annuler
                    </button>
                    <button type="button" class="btn btn-success" data-dismiss="modal" id="valueOK">
                        Valider
                    </button>
                </div>
            </div>
        </div>
    </div>

还有我的脚本：

    $(function () {
        $("#Dropdown1,#Dropdown2,#Dropdown3,#Dropdown4,#Dropdown5,#Dropdown6,#Dropdown7,#Dropdown8,#Dropdown9,#Dropdown10,#Dropdown11,#Dropdown12,#Dropdown13,#Dropdown14,#Dropdown15,#Dropdown16,#Dropdown17,#Dropdown18,#Dropdown19,#Dropdown20,#Dropdown21,#Dropdown22,#Dropdown23,#Dropdown24,#Dropdown25,#Dropdown26,#Dropdown27,#Dropdown28,#Dropdown27,#Dropdown28,#Dropdown29,#Dropdown30,#Dropdown31,#Dropdown32,#Dropdown33,#Dropdown34,#Dropdown35,#Dropdown36,#Dropdown37").change(function () {
            //Recupere la value de la liste
            selection = $(this).val();
            //Mettre la valeur du choix de liste.
            if (selection == 10) {
                //Affiche le modal
                $('#myModal').modal('show');
            }
        });
    });

var modalValue1 = $('#Valeur')
var modalValue2 = $('#Unite1')
var modalValue3 = $('#Unite2')
var modalOperand = $('#Operand')
var modalValue4 = $('#Valeur2')
var modalValue5 = $('#Unite3')
var modalValue6 = $('#Unite4')
var modalOperand2 = $('#Operand2')
var modalValue7 = $('#Valeur3')
var modalValue8 = $('#Unite5')
var modalValue9 = $('#Unite6')
$('#valueOK').click(function () {       
    $('#X').val(modalValue1.val() + modalValue2.val() + modalValue3.val() + modalOperand.val() + modalValue4.val() + modalValue5.val() + modalValue6.val() + modalOperand2.val() + modalValue7.val() + modalValue8.val() + modalValue9.val());
})

所以这很好，当我把文本放在我的文本框中，按下按钮后，信息会进入我页面的文本框，这没关系。但如果我试图将其应用于我的其他文本框，我会遇到一个问题，如果我填充模态，它会把这些信息放进页面的每个文本框，但这不是我想要的，例如，我该如何在第一个文本框中填充信息，在第二个文本框填充其他信息？

如果我理解你想要什么，你有很多文本框和下拉列表，如果下拉列表中的任何一个更改为10，你想显示一个对话框，然后填充相关的文本框。

所以，你编码太难了。首先，使用类选择器代替id选择器$（"#DropDown1，#DropDown2，…."）->$（".MyDropdown"）

之后你可以控制你的模式

要查找最近的文本框，可以在jquery中使用壁橱或父命令。

这只是一个解决方案，你可以找到很多其他的解决方案。比如通过数据或咏叹调进行查找。

我希望它对你有用。

编辑

$(".dropdown").click(function(){
     var targetTextBox=$(this).closest("div+ input").prev().find('input');
     BootstrapDialog.show({
        message: function(dialog) {
            var $message = $('<div></div>');
            var pageToLoad = dialog.getData('pageToLoad');
            $message.load(pageToLoad);
            return $message;
        },
        data: {
            'pageToLoad': 'remote.html'
        },
        buttons: [{
            id: 'btn-1',
            label: 'Click to disable and spin.',
            action: function(dialog) {
                targetTextbox='load your data';
            }
        }]
    });
});

这是一个示例，但您必须为自己自定义它。并且您必须使用对话框而不是模式

相关文章：