2017-05-21 6 views
0

Im Allgemeinen erstellen wir ein Formular. Mit der 'add-quest-btn' füge ich einem Formular eine neue Frage hinzu. Wir können sofort eine Menge Fragen hinzufügen, da wir als Eigentümer (Autor) entscheiden müssen, was ein "Typ" von Antworten ist, indem wir aus der Dropdown-Liste auswählen.JQUERY, wählen ID

var num_question_options = [0]; 
var num_questions = 1; 

$('#add-question-btn').click(function() { 
    $('.questions').append(
     '<div class="questions-div" id="question-' + num_questions + '">' + 
     '<label id="question-label" for="question-text">id:' + num_questions + '</label>' + 
     '<input class="form-control" id="question-text" type="text" placeholder="Pytanie"/>' + 
     '<div class="select-select-type">' + 
     '<div class="dropdown">' + 
     '<select title="type" class="select-type form-control" id="select-' + num_questions + '">' + 
     '<option value="text">Krótka odpowiedz</option>' + 
     '<option value="radio">Wielokrotny wybór</option>' + 
     '<option value="checkbox">Pola wyboru</option>' + 
     '<option value="menu">Menu</option>' + 
     '<option value="scale">Skala liniowa</option>' + 
     // tego na razie nie bedzie 
     // '<option value="table">Siatka wielokrotnego wyboru</option>' + 
     '<option value="date">Data</option>' + 
     '<option value="hour">Godznia</option>' + 
     '</select>' + 
     '</div>' + 
     '<ul id="answers" class="list-unstyled"></ul>' + 
     '</div>' 
    ); 
    num_question_options[num_questions] = 0; 
    num_questions++ 
}); 

Abhängig vom gewählten Antworttyp sollten wir einen Platz zur Eingabe von möglichen Antworten erhalten (als Autor). Das ist meine Funktion, die eine Änderung der ausgewählten Option erkennt.

Das Problem ist: Wie in ausgewählten ID innerhalb dieser Funktion zu wissen, auf welche Frage etw angehängt werden soll.

$(document).on('change','select',function(){ 
    var select_val = this.value; 
    var field_val = parseInt($(this).attr("id")); //THIS IS PROBLEM 
    alert(field_val); 
    switch (select_val) { 
     case 'text': 
      alert('TESTtext'); 
      break; 
     case 'radio': 
      alert('TESTradio'); 
      var question = $('div.questions-div#question-' + field_val); 
      var id = { 
       questionId: field_val, 
       optionId: num_question_options[field_val] + 1 
      }; 
      question.find('ul#answers').append(
       '<li>' + 
       '<input class="form-control" ' + 
       'title="answer" ' + 
       'id="answer-' + num_question_options[field_val] + '" ' + 
       'type="text" ' + 
       'onfocus="add_option(' + id.questionId + ', +' + id.optionId + ')" ' + 
       'onblur="remove_option(' + id.questionId + ', +' + id.optionId + ')" />' + 
       '</li>' 
      ); 
      num_question_options[field_val]++; 
      break; 
     case 'checkbox': 
      alert('TESTcheckbox'); 
      break; 
     case 'menu': 
      alert('TESTmenu'); 
      break; 
     case 'scale': 
      alert('TESTscale'); 
      break; 
     case 'date': 
      alert('TESTdate'); 
      break; 
     case 'hour': 
      alert('TEShour'); 
      break; 
    } 
}); 

Antwort

0

Ihr Problem scheint der ParseInt zu sein. Es kann Select-ID nicht in eine ganze Zahl konvertieren, sondern gibt NAN zurück. Versuchen Sie so:

var field_val = parseInt($(this).attr("id").replace(/[^\d]/g,'')); 

Dies würde alle nicht-Ziffern vor der Analyse zu Int filtern.

Eine weitere possibile Lösung wäre, Daten-Attribute verwenden wie:

<select data-question-id="123"> ... </select> 

So können Sie die Frage-ID von $(this).data('questionId') abzurufen.

Sie sollten auch Ihre Markup überprüfen. Es scheint 3 offene div Tags und 2 schließende zu geben.

+0

thx, mit .replace (/ [^ \ d]/g, '') funktioniert es. –

+0

@ JanekWojciechowski Können Sie meine Antwort akzeptieren? – Gerry

+0

Entschuldigung, ich tat und thx wieder –