перенести данные из всплывающего многострочного текстового поля javascript в элемент управления select - PullRequest
Новая
       10

перенести данные из всплывающего многострочного текстового поля javascript в элемент управления select

1 голос
/ 16 февраля 2012

Я пытаюсь перенести данные из многострочного текстового поля в выбранный элемент управления. Многострочное текстовое поле отображается как всплывающее окно, и я хочу, чтобы все записи, вставленные в текстовое поле, были перенесены в элемент управления select, как только пользователь нажмет кнопку «Отправить» во всплывающем окне. Вероятно, с jquery или javascript, или, может быть, что-то еще. Страница построена в MVC3 Razor. Вот код со страницы:

Скрипт для всплывающего управления: 

<script type="text/javascript">
    $(function () {
        $("a[id^=opener]").click(function () {
                    $("#dialog").dialog('destroy');
                    $("#dialog").attr("title", "Please paste your products")
                    .html("<p><textarea name=\"TextMessage\" rows=\"10\" cols=\"72\" /><br /><input type=\"submit\" value=\"Submit\" /></p>");

                    $("#dialog").dialog({
                        height: 420,
                        width: 650,
                        modal: true
                    });
        });

    });
</script>

.cshtml страница: 

@using (Html.BeginForm("ASPXView", "Report", FormMethod.Post)) {
    @Html.ValidationSummary(true, "Password change was unsuccessful. Please correct the errors and try again.")
    <div>
        @Html.Hidden("Id", Model.Report.Id)
        <div id="accordion">
        @{int i=0;}
            @foreach (var item in Model.Parameters)
            {
                <h3><a href="#">@Html.LabelFor(m => item.Name, item.Prompt)</a></h3>
                <div>
                    <div class="editor-label">
                        Search @*Html.TextBox("Search")*@ 
                        <input id="@("Search" + item.Name)" type="text" name="q" data-autocomplete="@Url.Action("QuickSearch/" + item.Name, "Report")" />
                    </div>

                    <div class="editor-field">
                        <select multiple id="@("Select" +item.Name)" name="@("Select" +item.Name)"></select>                           
                    </div>

                    <div class="removed" style="clear:both; float:left; margin-left:440px;">  
                     <a href="#" class="remove">Remove selection</a>   
                     <a id= "opener@(i)" class="OpenDialogClass" href="#" >Open Dialog</a>           
                    </div>    

                </div>
                i++;
            }         
        </div>
        <p style="text-align: right">
            <input type="submit" value="Generate Report" />
        </p>
    </div>
}
<div id="dialog" title="Basic dialog">
</div>

Снимок экрана со страницы:

enter image description here

Итак, данные, которые будут вставлены во всплывающее текстовое поле, я хотел бы, чтобы они были в элементе управления выбором после нажатия кнопки отправки. Есть идеи, как я могу это сделать? Заранее спасибо, Лазиале

Ответы [ 2 ]

1 голос
/ 16 февраля 2012

Вы можете сериализовать содержимое текстовой области и затем делать то, что вам нужно с ним (отправить его на контроллер или, возможно, передать куда-нибудь на нижележащую страницу) 

$('form').submit(function(e){
   e.preventDefault();
   e.stopPropagation();

   var o = {};
   $( $('textarea').val().split(/\n|\r/) ).each(function(i){
      o[i] = this;
    });   
    var jsonString = JSON.stringify(o);   

    // DO SOMETHING WITH JSON OBJECT HERE
});​

http://jsfiddle.net/vUH3a/

0 голосов
/ 16 февраля 2012

Это даст вам старт. 

$("Button Selector").click(function(){
var SelectOptions= [];
        $("list Selector").each(function () {
            SelectOptions.push($(this).attr('id'));
        });
SelectOptions.each(function () {
            //build your mark up here and return
        });
});
...