Изменить содержимое ячейки таблицы на основе опции выбора?

Question

Здесь выберите блок:

<form> 
      <select id="select"> 
       <option disabled selected value="choose"> 
        CHOOSE 
       </option> 
       <option value="i2g" id="i2g"> 
        iPhone 2g 
       </option> 
       <option value="i3g" id="i3g"> 
        iPhone 3g 
       </option> 
      </select> 
      <button onclick="func1()" type="button"> 
       GO 
      </button> 
</form> 

Вот содержание таблицы:

<table id="iphone1g" border="1"> 
      <tr> 
       <td id="itable1"> 
        1 
       </td> 
       <td id="itable2"> 
        2 
       </td> 
      </tr> 
     </table> 

Вот JavaScript:

<script> 
      var x = document.getElementById("i2g") 
      var y = document.getElementById("i3g") 
      var m = document.getElementById("itable1") 
      var n = document.getElementById("itable2") 
      function func1(){ 
       if (x.selected = "true"){ 
        m.innerHTML = "hello" 
       } 
       if (y.selected = "true"){ 
        m.innerHTML = "adele" 
       } 
      } 
     </script> 

Это не работает. Я могу выбрать только один вариант всего выбора, и он может быть только последним.

Answer 1

Одиночный равный для назначения не для сравнения, вы должны использовать == или ===, чтобы проверить, выбраны ли эти значения.

Вы также пытаются проверить строковые значения истинно, вместо логического значения истинного (.selected возвращает истину или ложь не «истина» или «ложь»)

С обоих этих изменений на месте, он должен работать ,

var x = document.getElementById("i2g") 
    var y = document.getElementById("i3g") 
    var m = document.getElementById("itable1") 
    var n = document.getElementById("itable2") 
    function func1(){ 
     if (x.selected === true){ 
      m.innerHTML = "hello" 
     } 
     if (y.selected === true){ 
      m.innerHTML = "adele" 
     } 
    } 

Answer 2

начать с того, чтобы сравнить два объекта в Java Script вы должны использовать == не =.

Кроме того, вы должны получить выбранное значение из SELECT, как указано в this anwser.

Answer 3

Хорошо, давайте сломаем это. Во-первых, вам не хватает много полуколонок ;. Во-вторых, вам нужно использовать == для сравнения внутри оператора if, а не только =. В-третьих, обычно проще проверить значение выбора, проверив значение указанного выбора, а не каждый отдельный вариант.

Вот какой рабочий код и working demo.

var m = document.getElementById("itable1"); 
var n = document.getElementById("itable2"); 

var select = document.getElementById("select"); 

function func1() { 
    if (select.value == "i2g"){ 
    m.innerHTML = "hello"; 
    } 
    if (select.value == "i3g"){ 
    m.innerHTML = "adele"; 
    } 
}