Working with star drop down list with ajax call

Question

The web page has users select a start rating for the difficulty of hike they would like to go on, and uses that and another params to do an ajax call from a hiking api. I need help with giving the star rating they click a numerical value so I can make it a param(minstars) in the ajax call.

          <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

You can add values to the stars by adding value attributes to each of them. It would look like so:

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

You'd then get the value selected by doing this:

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

You could set a listener for it to change the value automatically as well: (Note -- You'd have to declare the variable globally so the function you call has access to it)

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

Answer 2

You are trying to get a value from a div. I would try moving the ckass to the select element.