如何选择val？ [私人]

Question

[更新]

嗨！根据我的第一个问题，这是一个更详细的问题。因此，我想根据用户在页面1中选择的选项更改页面2上的地图指针。

[示例：用户在第1页上选择雨伞，单击“立即查找”按钮，然后在第2页上的地图上显示地图指针“ Clementi 7-11”和“ Cheers Buona Vista”。但是，如果用户在页面上选择润唇膏，则单击“立即查找”按钮，它将在页面2的地图上显示用户地图指针“ SP 7-11”和“ Cheers Bouna Vista”。

当前，我的问题是，无论用户在页面1中选择了什么，它总是在页面2中的地图上显示地图指针'Clementi 7-11'和'Cheers Buona Vista'。

（（我不确定为什么当您运行代码段时，它不显示选项的下拉列表，但是我可以在VSC中进行选择，也可以显示我的Google Maps和地图指针）

var arr = [{
    img: 'umbrella.png',
    item: 'Umbrella',
    price: '$10',
    value: 1,
    qty: 0
  },
  {
    img: 'lipbalm.png',
    item: 'Lip Balm',
    price: '$5',
    value: 2,
    qty: 0
  },
  {
    img: 'flu.png',
    item: 'Flu Medication',
    price: '$5',
    value: 3,
    qty: 0
  },
  {
    img: 'glucose.png',
    item: 'Glucose Sweets',
    price: '$1',
    value: 4,
    qty: 0
  }
];
var globalIndex = 0;

//Page 1 Select
function populateOptions() {
  console.log('populateOptions');

  var o = "";
  $.each(arr, function(index, val) {
    console.log("index:" + index);
    var item = arr[index].item;
    o = o + "<option value='" + arr[index].value + "'>" + item + "</option>";
    console.log(arr[index].value)
  });
  $("#myOption").html(o);
  $("#myOption").selectmenu("refresh");
};

$(document).on("pagecreate", "#page1", function() {
  populateOptions();
  $('#myOption').on('change', function() {
    console.log(this.value);
    if (this.value == 2) {
      $('option').attr('value', 2);
    } else if (this.value == 3) {
      $('option').attr('value', 3);
    } else if (this.value == 4) {
      $('option').attr('value', 4);
    } else {
      $('option').attr('value', 1);
    }
    console.log(arr[globalIndex].value)
    $(":mobile-pagecontainer").pagecontainer("load", "#page2", {
      role: "page"
    });
  });
  $("#myOption").selectmenu("refresh", true);

});

//Page 2
$(document).on("pagecreate", "#page2", function() {
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: {
      lat: 11.3083,
      lng: 103.7776
    },
    zoom: 14,
    mapTypeId: 'roadmap'
  });
});

// //Umbrella Stores     
var umbrellaPoints = [{
    latitude: 1.315680,
    longitude: 103.764976,
    title: "Clementi 7-11",
    content: "<h3>Clementi 7-11</h3>"
  },

  {
    latitude: 1.307567,
    longitude: 103.789972,
    title: "Cheers Buona Vista",
    content: "<h3>Cheers Buona Vista</h3>"
  },
];

// //Lip Balm Stores
var lipBalmPoints = [{
    latitude: 1.311639,
    longitude: 103.778665,
    title: "SP 7-11",
    content: "<h3>SP 7-11</h3>"
  },

  {
    latitude: 1.307567,
    longitude: 103.789972,
    title: "Cheers Buona Vista",
    content: "<h3>Cheers Buona Vista</h3>"
  },
];

// //Flu Medicine Stores
var fluMedPoints = [{
    latitude: 1.303444,
    longitude: 103.792011,
    title: "Cheers Biopolis Street",
    content: "<h3>Cheers Biopolis Street</h3>"

  },

  {
    latitude: 1.311639,
    longitude: 103.778665,
    title: "SP 7-11",
    content: "<h3>SP 7-11</h3>"
  }
];

// //Glucose Sweets Stores
var gluSweetPoints = [{
    latitude: 1.315680,
    longitude: 103.764976,
    title: "Clementi 7-11",
    content: "<h3>Clementi 7-11</h3>"
  },

  {
    latitude: 1.303444,
    longitude: 103.792011,
    title: "Cheers Biopolis Street",
    content: "<h3>Cheers Biopolis Street</h3>"

  }
];


function findMe() {
  $('#popupDialogue').popup();
  $('#popupDialogue').popup('open');
  navigator.geolocation.getCurrentPosition(onFindSuccess, onError);
};

function onFindSuccess(position) {
  $('#popupDialogue').popup('close');
  var latlong = new google.maps.LatLng(position.coords.latitude,
    position.coords.longitude);
  var mapProp = {
    center: latlong,
    zoom: 18,
    mapTypeId: google.maps.MapTypeId.HYBRID
  };
  var map = new google.maps.Map(document.getElementById("map-canvas"), mapProp);
  var content = "<h3>You are here</h3>";
  var title = "Your position";
  addMarkersToMap(map, latlong, title, content);
}

function onError(error) {
  alert("Encounter an error")
}

function addMarkersToMap(map, latlong, title, popcontent) {
  var marker = new google.maps.Marker({
    position: latlong,
    map: map,
    title: title
  });

  var infowindow = new google.maps.InfoWindow({
    content: popcontent
  });

  infowindow.open(map, marker);
}

function showPoints() {
  var latlong = new google.maps.LatLng(1.311166, 103.775583);
  var mapProp = {
    center: latlong,
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map-canvas"), mapProp);

  $('#findNow').click(function() {
    console.log(this.value)

  });
  console.log(arr[globalIndex].value);

  if (arr[globalIndex].value == 1) {
    $.each(umbrellaPoints, function(index, val) {
      var latlong2 = new google.maps.LatLng(val.latitude, val.longitude);
      addMarkersToMap(map, latlong2, val.title, val.content);
    });
  } else if (arr[globalIndex].value == 2) {
    $.each(lipBalmPoints, function(index, val) {
      var latlong3 = new google.maps.LatLng(val.latitude, val.longitude);
      addMarkersToMap(map, latlong3, val.title, val.content);
    });
  } else if (arr[globalIndex].value == 3) {
    $.each(fluMedPoints, function(index, val) {
      var latlong4 = new google.maps.LatLng(val.latitude, val.longitude);
      addMarkersToMap(map, latlong4, val.title, val.content);
    });
  } else if (arr[globalIndex].value == 4) {
    $.each(gluSweetPoints, function(index, val) {
      var latlong5 = new google.maps.LatLng(val.latitude, val.longitude);
      addMarkersToMap(map, latlong5, val.title, val.content);
    });
  }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyD7WcthdB_FxP0wUX1rRgJCDHiw2IpqUz0"></script>
</head>

<body>
  <!-- Page 1 -->
  <div data-role="page" id="page1">
    <div data-role="main" class="ui-content" id="page1main" style="margin-top: 250px;">
      <label for="select">Tell me what are you looking for today:</label>
      <select name="select" class="selectItem" id="myOption"></select>
      <br>
      <button style="width: 70%; margin-left: auto; margin-right: auto;" id="findNow">
              <a href="#page2" data-transition="flip"onclick="showPoints()">Find Now</a>
            </button>
    </div>
  </div>

  <!-- Page 2 -->
  <div data-role="page" id="page2">
    <div data-role="header">
      <a href="#page1" class="ui-btn ui-icon-home ui-btn-icon-left ui-corner-all ui-btn-icon-notext"></a>
      <h1>Google Maps</h1>
      <a data-rel="back" data-role="button" data-icon="arrow-l" data-iconpos="left">Go back</a>
    </div>
    <div data-role="main" class="ui-content">
      <div id='content'>
        <p><button class="ui-button" onclick="findMe()">Find Me</button></p>
        <p><button class="ui-button" onclick="showPoints()">Places of interest</button></p>
        <div id="map-canvas"></div>
      </div>
    </div>
    <div data-role="popup" id="popupDialogue" data-dismissible="false" style="max-width:400px;">
      <div data-role="header">
        <h1>Map loading...</h1>
      </div>
      <div role="main" class="ui-content">
        <h3 class="ui-title">Retrieving current position... please wait</h3>
      </div>
    </div>
  </div>
</html>

Answer 1

[globalIndex从未更改，它保持为0。arr[0].value为1，因此arr[globalIndex].value也是1。您可能想通过globalIndex来更新this.value。>

$(document).on("pagecreate", "#page1", function () {
    populateOptions();
    $('#myOption').on('change', function() {
    console.log( this.value );
    globalIndex = this.value;
    if (this.value == 2){
        $('option').attr('value', 2);
    } else if (this.value == 3){
        $('option').attr('value', 3);
    } else if (this.value == 4){
        $('option').attr('value', 4);
    } else {
        $('option').attr('value', 1);
    }

    // $('#myOption').attr('value', 'this.value');   
    console.log(arr[globalIndex].value) 
    $( ":mobile-pagecontainer" ).pagecontainer( "load", "#page2", { role: "page" } );
});

Answer 2

您的示例不是很清楚，逻辑也不清楚，因为它是一个受限制的示例。考虑以下代码。