Смена картинки в зависимости от select

Question

Всем добрый день, хочу попробовать привязать картинку для визуализации информации из селекта.Есть два связанных селекта данные подгружаются из mysql, адресс картинки лежит в той же таблице что таблица второго селекта,стобец esk.В результате механика такая что выбираем первый селект, выбираем второй селект, и подгружается картинка с изображением обьекта из второго селекта, увы моих знаний хватитило только для двух динамических селектов.

 <script type="text/javascript">
$(document).ready(function()
{
$("#ndetal").change(function()
{
var id=$(this).val();
var dataString = 'id='+ id;

$.ajax
({
type: "POST",
url: "select.php",
data: dataString,
cache: false,
success: function(html)
{
$("#oper").html(html);
} 
});

});

});
</script>
<script>
$("#oper").change(function(){ 
   $("#target-img").attr('src', $(this).find(":selected").data('img') );
});
</script>

<div class="alert alert-primary" role="alert">
  <div class="row justify-content-md-start">
    <div class="container-fluid">
            <select name="detal"  id="ndetal" data-width="100%">
            <option selected="selected">--Выбрать изделие--</option>
            <?php
            require 'connect.php';
            $sql=mysql_query("select id,ch from chertesh");
            while($row=mysql_fetch_array($sql))
            {
            $id=$row['id'];
            $ch=$row['ch'];
            $operaciya=$row['operaciya'];
            echo '<option value="'.$id.'">'.$ch.'</option>';
           } ?>
          </select>
          </div>
          <div class="container-fluid">
<select name="operaciya"   id="oper" width="50">
<option selected="selected">--Выбрать операцию--</option>
</select>
</div>
     <?php
require 'connect.php';
$sql = "SELECT * FROM oplist order by operators ASC";
$result_select = mysql_query($sql);
?>
<div class="container-fluid">
           <select name="operatorname"  id="operatorname" class="form-control">
       <option selected="selected">Выберите оператора:</option>
    <?php while($object = mysql_fetch_object($result_select)):?>
    <option value = "<?=$object->operators?>"><?=$object->operators?></option>
    <?php endwhile;?>
</select>
</div>
<div class="container-fluid">
     <?php
require 'otklist.php';
?>
</select>
</div>
<br>
<div class="container-fluid">
<select name="cnc">
<option selected="selected">Выберите рабочее место:</option>
<optgroup label="Участок предварительной обработки">
  <option value="DAS PM1" >DAS PM1</option>
  <option value="1В340 РМ2">1В340 РМ2</option>
  <option value="SPINNER РМ3">SPINNER РМ3</option>
<optgroup label="Участок чистовой обработки">
  <option value="SMEC PM4" >SMEC PM4</option>
  <option value="SMEC PM5" >SMEC PM5</option>
  <option value="SMEC PM6" >SMEC PM6</option>
  <option value="SMEC PM7" >SMEC PM7</option>
  <option value="Feeler PM8" >Feeler PM8</option>
  <option value="Tsugami PM9" >Tsugami PM9</option>
  <option value="Nuoxin PM14" >Nuoxin PM14</option>
  <option value="JSTOMI PM15" >JSTOMI PM15</option>
  <option value="JSTOMI PM16" >JSTOMI PM16</option>
<optgroup label="Участок фрезерной обработки">
  <option value="LCV-500 PM10" >LCV-500 PM10</option>
  <option value="Sunmill-710 PM11" >Sunmill-710 PM11</option>
  <option value="Sunmill-800 PM13" >Sunmill-800 PM13</option>
  <option value="DMC PM12" >DMC PM12</option>
</select>
</div>
<br>
<div class="container-fluid">
    <select data-role="select" name = "status" >
        <option value="1" >Годно</option>
        <option value="2">Брак</option>
    </select>
</div>
<br>
<div class="container-fluid">
       <input type="text" data-role="materialinput" name="coment" placeholder = "Комментарий">
       </div>
       <div class="container-fluid">
          <input type="submit" class="btn btn-success btn-lg btn-block" value="Добавить в журнал" data-toggle="modal" data-target="#exampleModal"/>   
</div>
             </div>
       </div>
 </form>

Answer 1

Несколько упростите код выбора первого селекта

$("#ndetal").change(function(){
     $("#oper").load("select.php", { id: $(this).val() });
});

Если вы пишите, что путь к картинке находится там же, где берете данные (поле esk), то выводите этот путь сразу в селект.

echo  "<option value='{$operaciya}' data-img='{$esk}'>{$translate}</option>";

Тогда при переключении второго селекта получите данные из дата атрибута и измените картинку.

$("#oper").change(function(){ 
   $("#target-img").attr('src', $(this).find(":selected").data('img') );
});

зы: расширение mysql_* устарело и ныне не используется, в пхп 7 вовсе отсутствует; Выбирайте не все столбцы select *, а указывайте только нужные. Вместо классов .oper/.ndetal лучше использовать ID #oper/#ndetal; Если перепишите код под PDO/mysqli то для передачи параметров в запрос применяйте соответствующие инструменты, а не напрямую вставляйте значения в строки запросов.

БЛОГ НА HUSL

Смена картинки в зависимости от select

Ответы (1 шт):