使用带有 ajax 调用的星形下拉列表答案

【问题标题】：Working with star drop down list with ajax call使用带有 ajax 调用的星形下拉列表
【发布时间】：2020-05-15 02:05:23
【问题描述】：

该网页让用户为他们想要继续的远足难度选择一个开始评级，并使用该评级和另一个参数从远足 api 进行 ajax 调用。我需要帮助给他们点击一个数值的星级评分，以便我可以在 ajax 调用中将其设为参数（minstars）。


          <div class="column">
            <div class="field">
              <label class="label">Whats the minimum rating for your hike?</label>
              <div class="control">
                <div class="select minStar">
                  <select>
                    <option>0 stars</option>
                    <option>⭐</option>
                    <option>⭐⭐</option>
                    <option>⭐⭐⭐</option>
                    <option>⭐⭐⭐⭐</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
        </div>
        <button class="button is-link" id="submitButton">Search</button>

navigator.geolocation.getCurrentPosition(function (location) {

    var maxDistance;
    var minLength;
    var minStars;
    var apiKey = "key=200749192-819757ad274cc592a221c4c70b9c441e";
    var i = 0;
    var trails;
    $("button").on("click", getTrails);

    function getTrails(event) {
        maxDistance = $(".maxDistance").val();
        minLength = $(".minLength").val();
        console.log(location.coords.longitude);
        console.log($(".minStar").val());
        console.log(maxDistance);
        console.log(minLength);
        var queryURL = "https://www.hikingproject.com/data/get-trails?" +
            "lat=" + location.coords.latitude + "&lon=" + location.coords.longitude +
            "&maxDistance=" + maxDistance + "&minLength=" + minLength + "&minStars=" + minStars + "&" + apiKey;

        event.preventDefault();
        $.ajax({
                url: queryURL,
                method: "GET"
            })
            .then(function (response) {
                trails = response.trails
                console.log(queryURL)
                $(".name").html("Trail Name: " + response.trails[i].name);
                $(".location").html("Location: " + response.trails[i].location);
                $(".ascent").text("Ascent: " + response.trails[i].ascent + "ft");
                $(".descent").text("Descent: " + response.trails[i].descent + "ft");
                $(".length").text("Length: " + response.trails[i].length + "mi");
                $(".stars").text("Stars: " + response.trails[i].stars);
                parseDifficulty(response.trails[i].difficulty);

                i++;
                if (i === trails.length) {
                    i = 0
                }

                fetchWeather(response.trails[i].location);
            });
    }

【问题讨论】：

首先让我说你应该使用navigator.geolocation.watchPosition而不是navigator.geolocation.getCurrentPosition，否则浏览器会在每次（烦人）时提示用户他们的位置。只需将position.coords 存储在范围比watchPosition 循环更高级别的变量中。是的，不要使用location，它是一个可以重定向的神奇窗口属性，因此将其作为参数覆盖是一种不好的做法。确保在 change 事件上执行 AJAX。当然，您必须执行服务器端代码才能将信息输入数据库。

标签： javascript html ajax dropdown

【解决方案1】：

您可以通过为每个星星添加value 属性来为星星添加值。它看起来像这样：

<option value="0">0 stars</option>
<option value="1">⭐</option>                    
<option value="2">⭐⭐</option>
<option value="3">⭐⭐⭐</option>
<option value="4">⭐⭐⭐⭐</option>

然后您将通过执行以下操作获得选择的值：

$("minStar").children("option:selected").val();

您也可以为其设置一个侦听器以自动更改该值：（注意——您必须在全局范围内声明该变量，以便您调用的函数可以访问它）

$("minStar").change(function(){
  minStarRating = $(this).children("option:selected").val();

【讨论】：

【解决方案2】：

您正试图从 div 中获取值。我会尝试将 ckass 移动到选择元素。

【讨论】：