Un GÉNIE en HTML/Javascript pour résoudre mon problème (SENIOR)

en HTML
Liste déroulante :
- 10
- 20
- 30

l'utilisateur choisi une valeur et valide à l'aide d'un bouton ok

en Javascript
var bidule = [[4,8],[5,6],[9,7]]

Je veux sélectionner la valeur >10< (ou >20<...) que l'utilisateur aura choisie dans la liste déroulante html et effectuer un calcul avec les valeurs des sous listes correspondantes (réponse 1, liste 1 / réponse 2 / liste 2°)

Exemple :

Sélection de 10 : afficher sur la page HTML le résultat de A*X+B soit 10*4+8 "Le résultat est 48"
Sélection de 20 : afficher sur la page HTML le résultat de A*X+B soit 20*5+6 "Le résultat est 106"
Sélection de 30 : afficher sur la page HTML le résultat de A*X+B soit 30*9+7 "Le résultat est 277"

layout--withBackground .layout__contextBottom, .layout--withBackground .layout__contentAfter, .layout--withBackground .layout__content, .layout--withBackground .layout__contentAside, .layout--withBackground .layout__contentMain, .layout--withBackground .layout__contentMainMediaContainer, .layout--withBackground .layout__contentMainMedia, .layout--withBackground .layout__contentBefore, .layout--withBackground .layout__contentHeader, .layout--withBackground .layout__breadcrumb, .layout--withBackground .layout__contentTop {
background-color: #f2f2f2;
}
@media screen and (min-width: 612px) and (max-width: 807px)
.layout--forum .layout__videoFooter, .layout__contextBottom, .layout__contentAfter, .layout__content, .layout__contentAside, .layout__contentMain, .layout__contentMainMediaContainer, .layout__contentMainMedia, .layout__contentBefore, .layout__contentHeader, .layout__breadcrumb, .layout__contentTop {
max-width: 36.75rem;
}
@media screen and (max-width: 807px)
.layout__contentAside {
grid-row: 11;
grid-column: 1;
}
.layout__row--gutter {
padding-right: 0.875rem;
padding-left: 0.875rem;
}
.layout__row {
min-width: 20rem;
width: 100%;
margin-left: auto;
margin-right: auto;
}

• , *::before, *::after {
  box-sizing: border-box;
  }
  user agent stylesheet
  div {
  display: block;
  }
  body {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  font-size: .875rem;
  }
  body {
  margin: 0;
  font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212121;
  background-color: #f2f2f2;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
  :root {
  font-size: 1rem;
  }
  :root {
  --jv-text-primary: #0160ee;
  --jv-text-hover-primary: #014cbb;
  --jv-text-secondary: #ff3c00;
  --jv-text-hover-secondary: #cc3000;
  --jv-bg-color-light: #fafafa;
  --jv-bg-color: #f2f2f2;
  --jv-text-color: #212121;
  --jv-border-color: #e0e0e0;
  --jv-block-bg-color: #fff;
  --jv-text-muted-color: #757575;
  --jv-link-hover-bg-color: #e4e9f1;
  --jv-primary: #0160ee;
  --jv-secondary: #ff3c00;
  --jv-success: #198754;
  --jv-info: #0dcaf0;
  --jv-warning: #ffc107;
  --jv-danger: #dc3545;
  --jv-light: #eef1f6;
  --jv-dark: #212529;
  --jv-font-sans-serif: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --jv-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --jv-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  }
  html {
  font-size: 100%;
  touch-action: manipulation;
  -webkit-font-smoothing: antialiased;

à ton service
Essaye-ça l'op

HTML

<select id="">
<option value="">10</option>
<option value="">20</option>
<option value="">30</option>
</select>

JS
var bidule = [[4,8],[5,6],[9,7]]

Si on sélectionne la Nième valeur de la liste déroulante je veux sélectionner les valeurs de la Nième liste correspondante

Sur ma page html afficher le résultat du calcul AX+B (exemple 10x4+8)

Le résultat est 48

Ça doit se faire en UNE ligne de jQuery

Le 17 janvier 2022 à 23:39:32 :
layout--withBackground .layout__contextBottom, .layout--withBackground .layout__contentAfter, .layout--withBackground .layout__content, .layout--withBackground .layout__contentAside, .layout--withBackground .layout__contentMain, .layout--withBackground .layout__contentMainMediaContainer, .layout--withBackground .layout__contentMainMedia, .layout--withBackground .layout__contentBefore, .layout--withBackground .layout__contentHeader, .layout--withBackground .layout__breadcrumb, .layout--withBackground .layout__contentTop {
background-color: #f2f2f2;
}
@media screen and (min-width: 612px) and (max-width: 807px)
.layout--forum .layout__videoFooter, .layout__contextBottom, .layout__contentAfter, .layout__content, .layout__contentAside, .layout__contentMain, .layout__contentMainMediaContainer, .layout__contentMainMedia, .layout__contentBefore, .layout__contentHeader, .layout__breadcrumb, .layout__contentTop {
max-width: 36.75rem;
}
@media screen and (max-width: 807px)
.layout__contentAside {
grid-row: 11;
grid-column: 1;
}
.layout__row--gutter {
padding-right: 0.875rem;
padding-left: 0.875rem;
}
.layout__row {
min-width: 20rem;
width: 100%;
margin-left: auto;
margin-right: auto;
}

• , *::before, *::after {
  box-sizing: border-box;
  }
  user agent stylesheet
  div {
  display: block;
  }
  body {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  font-size: .875rem;
  }
  body {
  margin: 0;
  font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212121;
  background-color: #f2f2f2;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
  :root {
  font-size: 1rem;
  }
  :root {
  --jv-text-primary: #0160ee;
  --jv-text-hover-primary: #014cbb;
  --jv-text-secondary: #ff3c00;
  --jv-text-hover-secondary: #cc3000;
  --jv-bg-color-light: #fafafa;
  --jv-bg-color: #f2f2f2;
  --jv-text-color: #212121;
  --jv-border-color: #e0e0e0;
  --jv-block-bg-color: #fff;
  --jv-text-muted-color: #757575;
  --jv-link-hover-bg-color: #e4e9f1;
  --jv-primary: #0160ee;
  --jv-secondary: #ff3c00;
  --jv-success: #198754;
  --jv-info: #0dcaf0;
  --jv-warning: #ffc107;
  --jv-danger: #dc3545;
  --jv-light: #eef1f6;
  --jv-dark: #212529;
  --jv-font-sans-serif: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --jv-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --jv-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  }
  html {
  font-size: 100%;
  touch-action: manipulation;
  -webkit-font-smoothing: antialiased;

à ton service
Essaye-ça l'op

C'est un style CSS bien essayé

Le 17 janvier 2022 à 23:44:51 :
Ça doit se faire en UNE ligne de jQuery

Je pige rien aux langages de programmation khey complique moi pas plus la tache

Je veux le faire en javascript/html pour faire un user script ou une extension chrome

Le 17 janvier 2022 à 23:44:51 :
Ça doit se faire en UNE ligne de jQuery

Tu vis en quelle année ?

PS : humour, jQuery c'est vraiment sous côté de nos jours

Ajouter un attribut value a tes options et agrder le nom de la selection en label

Ansii tu recuperanla valeur sleectionné (par exemple : 0,1,2,3,4)

Et tira chercher dans ta liste la position correspondante

Si la longueur de ta liste est egale au nombre d’option dans ton selecteur et que l’odre match c’est facile en recuperant la position de la liste, sinin tu oeux attribuer des value pour regrouper les listes qui correspondent a differente selection