0
votes

Bouton et javascript

Puis-je ajouter JS dans ce code? Mon point est que lorsque je clique sur le bouton, il trouve la voiture et ouvre le lien qui lui est attribué.

<select class="selecttype" id="cars">
  <optgroup label="RENAULT">
  <option id="euro" href="mylink" value="euro1">Renault Euro 3</option>
  <option id="euro" href="mylink" value="euro2">Renault Euro 4</option>
</select>

<button class="buttonsea" type="submit" onclick="btnclick">Search</button>

javascript html

1 commentaires

Oui, vous pouvez, vous pouvez recevoir et afficher des informations du serveur par ajax ou d'autres moyens, mais votre question est incomplète et doit être plus détaillée.

6 Réponses :

1
votes

Vous avez besoin du () après le nom de la fonction pour appeler la fonction.

var cars = document.getElementById('cars')
var selectedCar = cars.options[cars.selectedIndex].value;

Ensuite, à l'intérieur de la fonction, vous utilisez ceci, pour obtenir le sélectionné:

<select class="selecttype" id="cars">
  <optgroup label="RENAULT">
  <option id="euro" href="mylink" value="euro1">Renault Euro 3</option>
  <option id="euro" href="mylink" value="euro2">Renault Euro 4</option>
</select>

<button class="buttonsea" type="submit" onclick="btnclick()">Search</button>

2 commentaires

Il suffit d'ajouter cette démo en direct au cas où cela aiderait.

@Matt Nice! mais au lieu de ".href", alors peut-être ".value"? Tout comme j'ai changé le mien en: D

0
votes

option élément option n'a pas d'attribut href , mais vous pouvez l'envoyer en tant qu'attribut data-* et l'extraire dans le code JS. Voir l'exemple ci-dessous:

<select class="selecttype" id="cars">
  <optgroup label="RENAULT">
  <option id="euro" data-href="mylink1" value="euro1">Renault Euro 3</option>
  <option id="euro" data-href="mylink2" value="euro2">Renault Euro 4</option>
</select>

<button class="buttonsea" type="submit" onclick="btnclick()">Search</button>

function btnclick() {
  let cars = document.getElementById('cars');
  let selectedCar = cars.options[cars.selectedIndex];
  console.log(selectedCar.getAttribute('data-href'));
}

0 commentaires

0
votes

Si j'utilise ce code, il s'ouvre dans colsole

function btnclick() {
  let cars = document.getElementById('cars');
  let selectedCar = cars.options[cars.selectedIndex];
  console.log(selectedCar.getAttribute('data-href'));
}

1 commentaires

Salut @Bartek. Bienvenue dans la communauté! Je pense qu'il serait préférable d'utiliser la section des commentaires pour poursuivre la conversation sur l'une des réponses. Si vous avez l'intention d'ouvrir le lien au lieu de l'écrire dans la console, vous pouvez remplacer console.log(selectedCar.getAttribute('data-href')); avec window.location.href = selectedCar.getAttribute('data-href'); dans l'extrait que vous avez publié.

0
votes

Vous pouvez exécuter en appelant javascript comme ceci.
Je donne déjà un résultat Javascript dans ce code avec data-href inside data-* Attribute
Parce que vous ne pouvez pas entrer href dans une option sélectionnée bcoz ne possède pas d' Attribute

Voir l'exemple ci - dessous :

<select class="selecttype" id="cars">
  <optgroup label="RENAULT">
  <option id="euro" data-href="mylink1" value="euro1">Renault Euro 3</option>
  <option id="euro" data-href="mylink2" value="euro2">Renault Euro 4</option>
</select>
<button class="buttonsea" type="submit" onclick="btnclick()">Search</button>
<br>
<br>
<span id="result"></span>

function btnclick() {
  let cars = document.getElementById('cars');
  let newSelect = cars.options[cars.selectedIndex];
  let name = newSelect.getAttribute('data-href');
  let result = document.getElementById('result');
  result.innerHTML = "<a href='" + name + "'>" + name + "</a>";
 
}

0 commentaires

0
votes

J'ai fait comme ça et ça marche: D

function btnclick() {
  let cars = document.getElementById('cars');
  let selectedCar = cars.options[cars.selectedIndex];
  window.open(selectedCar.getAttribute('href'));
}

0 commentaires

0
votes

Vous pouvez tester la solution ici https://jsfiddle.net/2pz9se0q/3/

HTML

Value   Description
_blank  Opens the linked document in a new window or tab
_self   Opens the linked document in the same frame as it was clicked (this is default)
_parent Opens the linked document in the parent frame
_top    Opens the linked document in the full body of the window

Remarque: 1- que j'ai supprimé l' id="euro" , vous ne pouvez pas donner le même identifiant à de nombreuses balises 2- le groupe d'options le plus fermé par </optgroup>

function btnclick() {
  let cars = document.getElementById('cars');
  let selectedCar = cars.options[cars.selectedIndex];
  let link = selectedCar.getAttribute('data-href');
  window.open(link, '_blank');
}

Description: lorsque vous cliquez sur le bouton, la fonction btnclick() sera déclenchée. cette fonction obtiendra l'élément avec les voitures d'identité. à partir des options d'élément, il prendra uniquement l'option sélectionnée et l'enregistrera sur selectedCar en utilisant l'élément selectedCar nous pouvons accéder à l'attribut data-href et prendre le lien

pour ouvrir le lien dans une nouvelle fenêtre, nous avons ajouté '_blank'

<select class="selecttype" id="cars">
  <optgroup label="RENAULT">
    <option  data-href="mylink1" value="euro1">
    Renault Euro 3
    </option>
    <option  data-href="mylink2" value="euro2">
    Renault Euro 4
    </option>
  </optgroup>
</select>

<button class="buttonsea" type="submit" onclick="btnclick()">Search</button>

0 commentaires