JSFiddle - React, Tailwind, and code Playground

by wisegorilla

HTML

<div id="product_select_container" class="product_select_container">
<img id="product-img" src="" alt="Smiley face" hidden />

<form name="product_select" id="product_select_form" action="conctact-details/" method="post">
<select name="product_type" id="product_type" class="product_select">
  <option value="" disabled selected>Produktkategorie auswählen</option>
  <option value="1" data-option-id="1">Bandage</option>
  <option value="2" data-option-id="2">Kissen</option>
</select>


<select name="cushion_type" id="cushion_type" class="product_select" disabled>
  <option value="" disabled selected>Kissenkategorie auswählen</option>
  <option value="1" data-option-id="1">Sitz - & Rückenkissen</option>
  <option value="2" data-option-id="2">Nackenkissen</option>
  <option value="3" data-option-id="3">Kniekissen</option>
  <option value="4" data-option-id="4">Schlafkissen</option>
</select>

<select name="cushion_name" id="cushion_name" class="product_select" data-src="wwww" disabled>
  <option value="a" disabled selected data-option-id="a"  data-size="b">Kissentyp auswählen</option>
  <option value="1" data-option-id="1" data-size="1" data-src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png">Orthopädisches Sitzkissen</option>
  <option value="2" data-option-id="1" data-size="2" data-src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png">Hämorrhoiden Kissen</option>
  <option value="3" data-option-id="1" data-size="3" data-src="https://homepages.cae.wisc.edu/~ece533/images/baboon.png">Rückenkissen</option>
  <option value="54" data-option-id="1" data-size="1" data-src="https://homepages.cae.wisc.edu/~ece533/images/barbara.png">Comfort Cushion</option>
  <option value="61" data-option-id="1" data-size="1" data-src="https://homepages.cae.wisc.edu/~ece533/images/boat.png">All-in-one</option>
  <option value="69" data-option-id="1" data-size="1" data-src="https://homepages.cae.wisc.edu/~ece533/images/cat.png">Aufstehkissen</option>
  <option...

CSS

.product_select:disabled {
  display: none;
}

JavaScript

var $cushion_type = $('#cushion_type'),
  $cushion_name = $('#cushion_name'),
  $cushion_size = $('#cushion_size'),
	$submit_btn = $('#submit_btn'),
	$product_type = $('#product_type'),
  $product_img = $('#product-img'),
  $options_a = $cushion_name.find('option'),
  $options_b = $cushion_size.find('option'),
 $product_src =  $cushion_name.find(':selected').data('src');
  


$product_type.on('change', function() {
  if ($product_type.get(0).selectedIndex > 1) {
    $cushion_type.prop("disabled", false);
  } else {
    $cushion_type.prop("disabled", true);
    $cushion_name.prop("disabled", true);
    $cushion_size.prop("disabled", true);
    $submit_btn.prop("disabled", false)
  }
})



$cushion_type.on('change', function() {
  $cushion_name.prop("disabled", false).html($options_a.filter(function() {
    return $(this).data('option-id') === parseInt($cushion_type.val(), 10) || $(this).data('option-id') === "a"
  })).val('a')
  $cushion_size.val('a')
  $cushion_size.prop("disabled", true)
  
})

$cushion_name.on('change', function() {
$product_img.prop("hidden", false);
//alert ($cushion_name.find(':selected').data('src'));
$product_img.attr('src',  $cushion_name.find(':selected').data('src'));
 
  $cushion_size.html($options_b.filter(function() {
    return $(this).data('option-id') === parseInt($cushion_name.val(), 10) || $(this).data('option-id') === "a"
  }));
  $cushion_size.prop('disabled', $cushion_size.find('option').length == 1).val('a')
  
    if ($cushion_name.get(0).selectedIndex > 0 && $cushion_size.prop("disabled") == true) {
       $submit_btn.prop("disabled", false)
    }
    
    else if ($cushion_name.get(0).selectedIndex > 0 && $cushion_size.get(0).selectedIndex == 0) {
       $submit_btn.prop("disabled", true)
    }
    else {
      $submit_btn.prop("disabled", false)
    }
 
})


$cushion_size.on('change', function() {
  
    if ($cushion_name.get(0).selectedIndex > 0) {
       $submit_btn.prop("disabled", false)
    } 
    else {
     ...