使用ajax调用的星形下拉列表工作

Question

该网页让用户为他们想去的徒步旅行的难度选择一个开始评级，并使用该和另一个params从徒步旅行api做一个ajax调用。我需要帮助给他们点击的星级一个数值，这样我就可以在ajax调用中把它作为一个param(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);
            });
    }

Answer 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();

Answer 2

你是想从div中获取一个值。我可以试着把ckass移到select元素上。