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

Question

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

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

所以效果很好，当我在我的文本框中输入文本并按下按钮后，信息将进入我页面中的文本框，没关系。但是，如果我尝试将其应用于其他文本框，我将遇到问题，如果我填写模式，它将获取此信息并将其放入页面的每个文本框中，但这不是我想要的，我该怎么做例如用信息填充第一个文本框，用其他信息填充第二个文本框？

Answer 1

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

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

之后你可以控制你的模态

在 jquery 中使用 closet 或 parent 命令查找最近的文本框。

这只是一个解决方案，您可以找到很多其他解决方案来做到这一点。就像通过数据查找-或咏叹调-。

希望对你有用。

编辑

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

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