JSFiddle - React, Tailwind, and code Playground

by diessses

HTML

<!doctype html>
<html lang="ja">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">


    <title>auto calc 1005</title>
  </head>
  <body>


<div class="container-fluid">


<div class="row">

<div class="col-12 col-md-6">


<div class="form-group col-md-8">
  <label for="">auto calc 1005</label>
</div>

<div class="form-group col-md-8">
    <label for="formGroupExampleInput"></label>
    <input type="text" class="form-control" id="result" placeholder="">
  </div>


<div class="form-group col-md-8">
      <label for="tubosu">select 30 or 40 or 50 </label>
      <select id="tubosu" class="form-control" onchange="showResult()"></select>
</div>

<div class="form-group col-md-8">
      <label for="u_type">select type </label>
      <select id="u_type" class="form-control" onchange="setProductElement()"></select>
</div>

<div class="form-group col-md-8">
      <label for="product">choose product</label>
      <select id="product" class="form-control" onchange="showResult()"></select>
</div>

<!-- <p style="color:blue;" id="product_info"></p> -->


</div>



</div>



</div>






    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script...

JavaScript

/**
 * document.ready
 */
$(document).ready(function () {

	//
	setTubosuElement();
	setU_typeElement();
	setProductElement();
});

function setTubosuElement() {
	const BLANK_LABEL = "select 30 or 40 or 50 ";

	let selectBoxElement = document.getElementById("tubosu");
	SelectboxManager.addBlankValue(selectBoxElement, BLANK_LABEL);
	SelectboxManager.addSelectboxFromArray(selectBoxElement, tubosuData);
}

function setU_typeElement() {
	const BLANK_LABEL = "Select type";

	let selectBoxElement = document.getElementById("u_type");
	SelectboxManager.addBlankValue(selectBoxElement, BLANK_LABEL);
	SelectboxManager.addSelectboxFromArray(selectBoxElement, u_typeData);
}

function setProductElement() {
	const BLANK_LABEL = "Select prduct";

	let u_typeValue = document.getElementById("u_type").value;
	let selectBoxElement = document.getElementById("product");

	SelectboxManager.removeChildren(selectBoxElement);
	SelectboxManager.addBlankValue(selectBoxElement, BLANK_LABEL);


	if (u_typeValue) {
		Object.keys(productData).forEach(function(key) {
			if (u_typeValue == key) {
				SelectboxManager.addSelectboxFromArray(selectBoxElement, productData[key]);
			}
		})
	}
	showResult();
}

function showResult() {
	let tubosuValue = document.getElementById("tubosu").value;
	let u_typeValue = document.getElementById("u_type").value;
	let productValue = document.getElementById("product").value;

	let result = document.getElementById("result");
	if (tubosuValue && u_typeValue && productValue) {
		//if all value selected

		if(tubosuValue == 30 && u_typeValue == 'M' && productValue == 920) {
		hoge = 920;
		}
		if(tubosuValue == 30 && u_typeValue == 'M' && productValue == 1117) {
		hoge = 1117;
		}
		if(tubosuValue == 30 && u_typeValue == 'M' && productValue == 1180) {
		hoge = 1180;
		}
		if(tubosuValue == 40 && u_typeValue == 'M' && productValue == 1182) {
		hoge = 1182;
		if(tubosuValue == 50 && u_typeValue == 'S' && productValue == 1593) {
		hoge = 1485;

		}

		result.value =...