How to get JS array value from nth value of form dropdown?-CodePudding

I have the following dropdown option in a form:

<select id="candidates">
    <option value="select">Pick one</option>
    <option value="Candidate 1">Candidate 1</option>
    <option value="Candidate 2">Candidate 2</option>
    <option value="Candidate 3">Candidate 3</option>
</select>

And I also have the following array defined:

const selectedcandidate = ["/image1.png", "/image2.png", "/image3.png"];

I'm trying to declare a variable that will contain the image file of the corresponding candidate that was selected from the dropdown:

finalselectedcandidate = selectedcandidate[candidates[n]];

However, the code above doesn't work. What would be the best way to accomplish this?

CodePudding user response：

I'm not completely sure, but maybe this what you are looking for?

<select id="candidates" onchange="myFunction()">
    <option value="select">Pick one</option>
    <option value="0">Candidate 1</option>
    <option value="1">Candidate 2</option>
    <option value="2">Candidate 3</option>
</select>

With this function should do the trick

function myFunction(){
    const selectedcandidate = ["/image1.png", "/image2.png", "/image3.png"];
  
  let e = document.getElementById("candidates");
  let value = e.value;
  
  if(selectedcandidate[value] !== undefined){
    alert(selectedcandidate[value]);
  }
  
};

CodePudding user response：

One possible way to solve this is to use the onChange event. Also you will need some way to relate the candidates to the pictures. One way to do that is to use a JS object with the select values as keys.

const candidates = {
  "Candidate 1": "image1.png",
  "Candidate 2": "image2.png",
  "Candidate 3": "image3.png"
}

function handleOnChange(selectElement){
  const selectedCandidate = selectElement.value;
  const selectedImage = candidates[selectedCandidate];
  console.log(`Selected image: ${selectedImage ?? "No image selected"}`);
}

<select id="candidates" onchange="handleOnChange(this)">
    <option value="select">Pick one</option>
    <option value="Candidate 1">Candidate 1</option>
    <option value="Candidate 2">Candidate 2</option>
    <option value="Candidate 3">Candidate 3</option>
</select>

CodePudding user response：

You can build it into your app as follows:

const selectedcandidate = ["/image1.png", "/image2.png", "/image3.png"];

$('#candidates').on('change', function() {
    const val = this.value,
          suffix = val !== 'select' ?  val.split(' ')[1] : null,
          index = suffix ? suffix - 1 : suffix,
          img = suffix ? selectedcandidate[index] : index;
          
    console.log( val, suffix, index, img );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="candidates">
    <option value="select">Pick one</option>
    <option value="Candidate 1">Candidate 1</option>
    <option value="Candidate 2">Candidate 2</option>
    <option value="Candidate 3">Candidate 3</option>
</select>