jQuery加载不填充select元素

时间:2014-09-25 09:00:25

标签: javascript php jquery

我有代码,当页面加载时,调用mysql并用数据填充select元素。这在初始加载或刷新页面时工作正常,但我想要做的是,当我从ajax获得成功回调时,是用新数据更新或重新填充select元素。

我可以看到数据是从firebug中的ajax返回的,但由于某种原因,没有填充select元素。如果有人能发现我搞砸的地方,我将不胜感激。非常感谢。

PHP / HTML代码

<div class="fieldset">
            <h1><span>Select Your Box(es)</span></h1>
            <p>
              <select data-placeholder="Choose your box(es)..." class="chosen-select" name="box_frtv[]" id="box_frtv" multiple required="required">
                <option value=""></option>
                <?php
                  do {

                  ?>
                <option value="<?php echo $row_rs_fbrtv['boxref']; ?>"><?php echo $row_rs_fbrtv['boxref']; ?></option>
                <?php
                  } while ($row_rs_fbrtv = mysql_fetch_assoc($rs_fbrtv));

                  $rows = mysql_num_rows($rs_fbrtv);

                  if($rows > 0) {

                  mysql_data_seek($rs_fbrtv, 0);

                  $row_rs_fbrtv = mysql_fetch_assoc($rs_fbrtv);

                  }

                  ?>
              </select><span></span><div id="boxError"></div>
            </p>
          </div>

jquery代码

submitHandler: function ()
{
  if ($("#USRfilertv").valid() === true)
  {
    var data = $("#USRfilertv").serialize();

    $.ajax(
    {
      type: "POST",
      url: "frtv.php",
      data: data,
      dataType: "json",

      success: function (data)
      {
        if (data.opp == 'error')
        {
          var messageOutput = '';
          for (var i = 0; i < data.length; i++)
          {

            messageOutput += data[i].file + '  ';

          }

          notif({
            msg: "There was an error retrieving the following file: "  + '<br /><br />' + '<b><font color=\"black\">' + data.file + '</font></b><br /><br />' + ' Please correct this error and try again.<br />If this error persists, please contact us quoting ref: ' + '<b><font color=\"#fbf66a\">' + '#FRTV0001.<br />' + '</font>' + '<br />' + 'Thank you.',
            type: "frtvError",
            position: "center",
            width: 490,
            height: 75,
            multiline: true,
            timeout: 6000,
            opacity: 0.8,
            fade: 10,
        });
        }
        else
        {
          var messageOutputs = '';
          for (var i = 0; i < data.length; i++)
          {

            messageOutputs += data[i].file + '  ';

          }

          $("#USRfilertv").get(0).reset();
          $("#box_frtv").load("refreshFrtv.php");
          $("#frtv_address").trigger("chosen:updated");

          notif({
            msg: "You have successfully retrieved the following file(s)."  + '<br /><br />' + '<b><font color=\"black\">' + data.file + '</font></b><br /><br />' + ' These file(s) were successfully entered into the database.<br />Thank you.',
            type: "FileRtvSuccess",
            position: "center",
            width: 440,
            height: 75,
            multiline: true,
            timeout: 6000,
            opacity: 0.8,
            fade: 10,
        });
        $("#box_frtv_chosen").find('option:selected').remove();
        $("#box_frtv").html('');
        $("#box_frtv").trigger("chosen:updated");
        $("#box_ffrtv_chosen").find('option:selected').remove();
        $("#box_ffrtv").html('');
        $("#box_ffrtv").trigger("chosen:updated");
        }

      }

    });
  }
}

2 个答案:

答案 0 :(得分:1)

要在选择中重新填充选项,您可以(清空)选择和(追加)您从数据库创建的新选项中的选项。

<强>演示

http://jsfiddle.net/48v5ufca/

<强> Jquery的

$("#clickme").on("click", function(e) {
var messageOutputs = '';
          for (var i = 0; i < 10; i++)
          {

            messageOutputs += '<option value="">New'+i+'</option>';


          }

$("#box_frtv").empty();
$("#box_frtv").append(messageOutputs);
});

答案 1 :(得分:-1)

我使用$.get遇到了类似的问题。

我正在尝试加载一个模板,以便从先前成功的ajax回调中添加data,并且我以这种方式解决了:

var t;
$.get('/js/template/page_01.mst',
    { t: new Date().getTime() }, // I added this var in here
    function(template) { 
        // etc... 
    });

但正如我所说,我不知道它是否可以解决你的问题。

在我的情况下,我试图得到的页面被缓存了。