Question

我对JS很新，所以我确信有一个简单的方法可以做到这一点。

我正在尝试从AJAX响应的第一个元素创建一个下拉菜单。响应如下：

[0: "14Z18Oct2017", 1: "13Z18Oct2017", 2: "12Z18Oct2017", ... 14: "00Z18Oct2017"]

我已经没有问题地填充了下拉菜单，但是在页面加载中，我想选择下拉列表的第一个元素作为默认值（它将用于动态显示目录中的图像）。

我正在使用HAniS，这是一个动画webapp的HTML图像，用于拼凑AJAX响应目录中的图像。 HAniS需要一个映射路径，我把它放在get_config（）函数的底部。

这是我到目前为止所拥有的：

config.js

function get_config() {
    var basepath = "http://site/times/";
    $.ajax({
        url: '../times.php', //a php script echoing an array of directory contents
        datatype: 'json',
        success: function(dirs) {
            $.each(dirs, function(index, date) {
                $('#times').append($('<option></option>').val(date).html(date));
            }
        }
    })
    // Here's part of the config JSON that HAniS requires
    var hancon = {
        // image_only_base should be:
        //     "http://site/times/14Z18Oct2017/" -> basepath + first element of response
        image_only_base: basepath + $('#times').val()
        // this is where I'm lost
    }
};

的index.html

<body onload="get_config()">
    <div id="testing">
        <select id="times">
            <!-- the options here are created via AJAX -->
            <!-- need the first value listed to be selected by default -->
            <option value="14Z18Oct2017">14Z18Oct2017</option>
            <option value="13Z18Oct2017">14Z18Oct2017</option>
            <...>
            <option value="00Z18Oct2017">14Z18Oct2017</option>
        </select>
    </div>
</body>

我认为get_config（）函数的最后一行是问题。

我用$('#times').val()刺了它，但这里没有返回任何值。

我也试过了：

$('#times').val(1),
$('#times').val(0),
$("#times option:selected").val()

和其他一些人。

如何引用下拉列表的第一个元素来动态创建路径？（响应的内容将不断变化 - 连续的python脚本正在向路径添加更多目录）

提前感谢所有人。

Answer 1

使用.attr('selected', 'selected');选择一个选项;
在ajax请求成功时初始化您的图像库，因为它是异步的。

<强>像

  function get_config() {
    var basepath = "http://site/times/";
    $.ajax({
        url: '../times.php', //a php script echoing an array of directory contents
        datatype: 'json',
        success: function(dirs) {
          $.each(dates, function(index, date) {
              $el = $('<option></option>').val(date).html(date);
              if (index === 0)
                $el = $el.attr("selected", "selected");
              $('#times').append($el);
            }

            // Here's part of the config JSON that HAniS requires
            var hancon = {
              // image_only_base should be:
              //     "http://site/times/14Z18Oct2017/" -> basepath + first element of response
              image_only_base: basepath + $('#times').val()
              // this is where I'm lost
            }
          }
        })

    };

Answer 2

    <script>
    function get_config() {
        var basepath = "http://site/times/";
        var hancon; // Global variable that will update each time when select
        // If you update hancon befor getting data from server it will be 
    undefined.
        $.ajax({
            url: 'GetTimes', //a php script echoing an array of directory contents
            datatype: 'json',
            success: function (dates) { // variable which you get from "success" and in "$.each" should be same.
                var sel = $("#times");
                $.each(dates, function (index, date) {
                    $el = $('<option></option>').val(date).html(date);
                    if (index === 0)
                        $el = $el.attr("selected", "selected");
                    $('#times').append($el);
                });
                updateHancon(); // You need to update Hancon in success so when it will get data
                //it will update otherwise it will be undefinded.

            }
        })

        function updateHancon() { // Best practise to create function and call it instead putting all in one function.
            hancon = {
                // image_only_base should be:
                //     "http://site/times/14Z18Oct2017/" -> basepath + first element of response
                image_only_base: basepath + $('#times').val()
                // this is where I'm lost
            }
            console.log(hancon);
        }

        // Update chnage event of "Times" for the and call updateHancon function for updating hancon
    };
</script>

在下拉列表

2 个答案: