无法使用Ajax打印下拉列表值

时间：2016-06-10 13:39:13

标签： javascript jquery ajax

我正在编写代码，我正在选择一个下拉列表，当我单击按钮时，我想在控制台中打印该值，但它正在打印null。

以下是我的代码。

<form name="formSec" id="formSec">
        <div class="bodytag1">
            <table>
                <tr>
                    <td colspan="2" align="center">Breaks</td>
                </tr>
                <tr>
                    <td>Break Task</td>
                    <td><select id="task" name="task"
                        onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);">
                            <option value="" disabled selected>Select</option>
                            <option value="break" id="break">Break</option>
                            <option value="ORD" id="ORD">ORD Meetings</option>
                            <option value="Training" id="Training">Training</option>
                            <option value="project" id="project">Adhoc Project</option>
                    </select></td>
                </tr>
                <tr>
                    <td>SubTask</td>
                    <td><select id="subtask" name="subtask">
                            <option value="Subtask">Subtask</option>
                    </select></td>
                </tr>
                <tr>
                    <td><input type="button" value="Start" name="Start" id="Start" /></td>
                    <td><input type="button" value="Stop" name="Stop" id="Stop" /></td>
                </tr>
            </table>
        </div>
    </form>

这是我的js 

<script type="text/javascript"
    src="http://code.jquery.com/jquery-1.10.0.min.js"></script>

<link rel="stylesheet" type="text/css" href="CSSFiles/myCssFile.css">
<script type="text/javascript">
    function dynamicdropdown(listindex) {
        document.getElementById("subtask").length = 0;
        switch (listindex) {
        case "break":
            document.getElementById("subtask").options[0] = new Option(
                    "Please select Break type");
            document.getElementById("subtask").options[0].disabled = true;
            document.getElementById("subtask").options[1] = new Option(
                    "Casual Break ", "Casual Break");
            document.getElementById("subtask").options[2] = new Option(
                    "Lunch Break", "Lunch Break");
            break;
        case "ORD":
            document.getElementById("subtask").options[0] = new Option(
                    "Please select type of Meeting", "");
            document.getElementById("subtask").options[0].disabled = true;
            document.getElementById("subtask").options[1] = new Option("Calls",
                    "Calls");
            document.getElementById("subtask").options[2] = new Option(
                    "Team Meeting", "Team Meeting");
            document.getElementById("subtask").options[3] = new Option(
                    "Thomson Activity (Fire Drill, RnR)",
                    "Thomson Activity (Fire Drill, RnR)");
            document.getElementById("subtask").options[4] = new Option(
                    "System Downtime", "System Downtime");

            break;
        case "Training":
            document.getElementById("subtask").options[0] = new Option(
                    "Please select Type of Training", "");
            document.getElementById("subtask").options[0].disabled = true;
            document.getElementById("subtask").options[1] = new Option(
                    "EDP Training", "EDP Training");
            document.getElementById("subtask").options[2] = new Option(
                    "Process Training", "Process Training");

            break;
        case "project":
            document.getElementById("subtask").options[0] = new Option(
                    "Please select type of Project", "");
            document.getElementById("subtask").options[0].disabled = true;
            document.getElementById("subtask").options[1] = new Option(
                    "Others", "Others");
            break;

        }
        return true;
    }  
</script>

<script type="text/javascript">
    var form = $('#formSec');
    var task = $('#task');
    var subtask = $('#subtask');
    $(document).ready(function() {
        $('#Start').on("click", function() {
            console.log(task);
            $.ajax({
                type : "post",
                url : "UpdateTime",
                data : form.serialize(),
                success : function(data) {
                    if (data) {
                        alert("worked");
                    }
                    //$('#result').attr("value", result);
                }
            });
            return false;
        });
    });
</script>

请让我知道我哪里出错了，我该如何解决这个问题。

由于

3 个答案:

答案 0 :(得分：1)

将引用移动到文档中的元素

$(document).ready(function() {
    var form = $('#formSec');
    var task = $('#task');
    var subtask = $('#subtask');
    $('#Start').on("click", function() {
        console.log(task);
    });
});

现在，当您单击该按钮时，它将具有对任务输入的引用。其他选项，如果你想将它们作为全局变量来移动脚本，使它出现在你引用的元素之后。

答案 1 :(得分：0)

您应首先获取所选选项，然后您可以获取该选项的值。

您可以使用此代码，例如：

var selectedOption = task.find("option:selected");
console.log(selectedOption.text());

答案 2 :(得分：0)

使用console.log(task.val())代替console.log(task) 

function dynamicdropdown(listindex) {
  document.getElementById("subtask").length = 0;
  switch (listindex) {
    case "break":
      document.getElementById("subtask").options[0] = new Option(
        "Please select Break type");
      document.getElementById("subtask").options[0].disabled = true;
      document.getElementById("subtask").options[1] = new Option(
        "Casual Break ", "Casual Break");
      document.getElementById("subtask").options[2] = new Option(
        "Lunch Break", "Lunch Break");
      break;
    case "ORD":
      document.getElementById("subtask").options[0] = new Option(
        "Please select type of Meeting", "");
      document.getElementById("subtask").options[0].disabled = true;
      document.getElementById("subtask").options[1] = new Option("Calls",
        "Calls");
      document.getElementById("subtask").options[2] = new Option(
        "Team Meeting", "Team Meeting");
      document.getElementById("subtask").options[3] = new Option(
        "Thomson Activity (Fire Drill, RnR)",
        "Thomson Activity (Fire Drill, RnR)");
      document.getElementById("subtask").options[4] = new Option(
        "System Downtime", "System Downtime");

      break;
    case "Training":
      document.getElementById("subtask").options[0] = new Option(
        "Please select Type of Training", "");
      document.getElementById("subtask").options[0].disabled = true;
      document.getElementById("subtask").options[1] = new Option(
        "EDP Training", "EDP Training");
      document.getElementById("subtask").options[2] = new Option(
        "Process Training", "Process Training");

      break;
    case "project":
      document.getElementById("subtask").options[0] = new Option(
        "Please select type of Project", "");
      document.getElementById("subtask").options[0].disabled = true;
      document.getElementById("subtask").options[1] = new Option(
        "Others", "Others");
      break;

  }
  return true;
}

var form = $('#formSec');
var task = $('#task');
var subtask = $('#subtask');
$(document).ready(function() {
  $('#Start').on("click", function() {
    console.log(task.val());
    $.ajax({
      type: "post",
      url: "UpdateTime",
      data: form.serialize(),
      success: function(data) {
        if (data) {
          alert("worked");
        }
        //$('#result').attr("value", result);
      }
    });
    return false;
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form name="formSec" id="formSec">
  <div class="bodytag1">
    <table>
      <tr>
        <td colspan="2" align="center">Breaks</td>
      </tr>
      <tr>
        <td>Break Task</td>
        <td>
          <select id="task" name="task" onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);">
            <option value="" disabled selected>Select</option>
            <option value="break" id="break">Break</option>
            <option value="ORD" id="ORD">ORD Meetings</option>
            <option value="Training" id="Training">Training</option>
            <option value="project" id="project">Adhoc Project</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>SubTask</td>
        <td>
          <select id="subtask" name="subtask">
            <option value="Subtask">Subtask</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>
          <input type="button" value="Start" name="Start" id="Start" />
        </td>
        <td>
          <input type="button" value="Stop" name="Stop" id="Stop" />
        </td>
      </tr>
    </table>
  </div>
</form>

相关问题
最新问题