2015-11-09 111 views
0

我有一個應用程序,它由一堆調查問題組成。我試圖保存所述<input><select>框的索引號,以按特定順序顯示它們。使用多選擇器設置來自多個jQuery .val()的變量的值

這樣說,下面的語句看起來好嗎?

yesNoQuestions[index].question_text = $(item).find("input, select").val(); 

或者我需要做到這一點(請原諒,因爲我是一個小白與它涉及到的jQuery):

yesNoQuestions[index].question_text = $(item).find("input").val(); 
yesNoQuestions[index].question_text = $(item).find("select").val(); 

這是應該的值保存到全功能數據庫通過一個按鈕。

$("#save-button").button().click(function (e) { 
      e.preventDefault(); 
      var surveyYesNoQuestions = $("#questionList").data("surveyYesNoQuestions"); 
      var yesNoQuestions = surveyYesNoQuestions.yesNoQuestions; 
      $("#questionList li").each(function (i, item) { 
       var index = $(item).data("index"); 
       //Don't need to do all this, just send back the new list since they are being all inserted anyways into a new version 
       if (index != null && index != undefined) { 
        yesNoQuestions[index].question_text = $(item).find("input, select").val(); 
        //yesNoQuestions[index].question_text = $(item).find("select").val(); 
        yesNoQuestions[index].order = i; 
       } else { 
        var question = 
         { 
          question_text: $(item).find("input, select").val(), 

          order: i, 
          survey_version_question_id: -1 
         } 
        yesNoQuestions.push(question); 
       } 
      }); 
      var params = { surveyYesNoQuestions: surveyYesNoQuestions } 
      $.ajax({ 
       type: "POST", 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       data: JSON.stringify(params), 
       url: "WebServices/WebService.asmx/SaveSurveyYesNoQuestions", 
       success: function (data) { 
        location.reload(); 
       }, 
      }); 
     }); 

這是html在提交給數據庫之前;

<ul id="questionList" class="ui-sortable"> 
    <li class="ui-state-default ui-widget yesNoQuestion"> 

<button class="question-delete ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"> 

<span class="ui-button-text">delete</span></button><input class="question-input ui-widget-content"> 
    </li> 
<li class="ui-state-highlight ui-draggable ui-draggable-handle" style="width: 700px; height: 30px;"> 
<button class="question-delete ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"> 
<span class="ui-button-text">delete</span></button> 
<select id="questionsDropDownBox"> 

       <option>Yes, 100% </option> 
       <option>No, but greater than 75% </option> 
       <option>No, but greater than 50%</option> 
       <option>No, but greater than 25%</option> 
       <option>No, but less than 25%</option> 
       <option>None</option> 
      </select> 
</li> 

這裏之後,我們呼籲它

<div class="yesno-question-row" data-answerid="1020190"> 
<span class="yesno-question">1. Some question text....</span> 
<span class="yesno-answer"><span class="yesno-radio required"> 
<input class="yesno-radio-button" type="radio" name="yesno1020190" value="Yes" undefined="">Yes 
<input class="yesno-radio-button" type="radio" name="yesno1020190" value="No" undefined="">No</span> 
<span class="yesno-comment"> <textarea class="yesno-textarea ui-widget-content"></textarea></span></span> 
</div> 

最後這個如果你希望得到提交給所有的答案創建行

function createYesNoQuestionRow(questionText, answerText, commentText, answerId) { 
      //returns a jquery object of the html for the row 
      var $yesNoQuestionRow = $("<div class='yesno-question-row' data-answerid='" + answerId + "'/>"); 
      var question = "<span class='yesno-question'>" + questionText + "</span>"; 
      var radioId = "yesno" + answerId; 
      var radioChecked = new Object(); 
      radioChecked[answerText] = "checked"; 
      var yesno = "<span class='yesno-radio required'><input class='yesno-radio-button' type='radio' name='" + radioId + "' value='Yes' " + radioChecked["Yes"] + ">Yes <input class='yesno-radio-button' type='radio' name='" + radioId + "' value='No' " + radioChecked["No"] + ">No</span>"; 
      var textarea = "<span class='yesno-comment'> <textarea class='yesno-textarea ui-widget-content'>" + commentText + "</textarea></span>"; 
      return $yesNoQuestionRow.append($(question)).append($("<span class='yesno-answer'/>").append($(yesno)).append($(textarea))); 
      //return $yesNoQuestionRow.append($(yesno)).append($(question)).append($(textarea)); 
     } 
+2

當你嘗試它時它工作嗎? –

+1

這屬於[codereview.stackexchange](http://codereview.stackexchange.com/) –

+0

我還沒有,在我嘗試之前,我只想得到第二個意見。 – CoderPoet

回答

0

在數組中的問題應該是這樣的:

var questions = $('input:text', 'select', 'input:radio:checked', 'input:checkbox:checked'); 
var yesNoQuestions = $.map(questions, function(item){ 
    return $(item).val(); 
}); 
+0

您好格雷格,感謝您的輸入我已經更新了代碼,以便您能夠看到內部運作 – CoderPoet

+0

您原來的問題是關於jQuery的。這對JavaScript來說是無足輕重的,我真正需要看到的是爲HTML提供的輸出到瀏覽器的內容 –

+0

謝謝,Greg實際上幫了我的忙。 – CoderPoet