How to Show Disable HTML Select Option in by Default

var $select1 = $('#select1'),  $select2 = $('#select2'),  $select3 = $('#select3'),  $options_a = $select2.find('option'),  $options_b = $select3.find('option');
$select1.on('change', function() {  $select2.prop("disabled", false).html($options_a.filter(function() {    return $(this).data('option-id') === parseInt($select1.val(), 10) || $(this).data('option-id') === "a"  })).val('a')  $select3.val('a')})
$select2.on('change', function() {  $select3.html($options_b.filter(function() {    return $(this).data('option-id') === parseInt($select2.val(), 10) || $(this).data('option-id') === "a"  }));  $select3.prop('disabled', $select3.find('option').length == 1).val('a')})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><select name="select1" id="select1">  <option value="" disabled selected>Select your option</option>  <option value="1" data-option-id="1">Sitzen </option>  <option value="2" data-option-id="2">Schlafen</option>  <option value="3" data-option-id="3">Reisen</option></select>
<select name="select2" id="select2" disabled>  <option value="a" disabled selected data-option-id="a">Select your option</option>  <option value="1" data-option-id="1">Comfort Cushion</option>  <option value="2" data-option-id="1">Freilagerungssitzkissen</option>  <option value="3" data-option-id="1">Rückenkissen</option>  <option value="4" data-option-id="1">Sitzkissen zum Druckmanagement</option>  <option value="5" data-option-id="1">Wedge Cushion</option>  <option value="6" data-option-id="1">Wedge Pillow</option>  <option value="7" data-option-id="2">Comfort Pillow</option>  <option value="8" data-option-id="2">Dreamy Cushion</option>  <option value="9" data-option-id="2">Kniekissen</option>  <option value="10" data-option-id="3">Reise Nackenkissen</option></select>
<select name="select3" id="select3" disabled>  <option value="a" disabled selected data-option-id="a">Select your option</option>  <option value="2" data-option-id="2">Standard</option>  <option value="3" data-option-id="2">Large</option>  <option value="1" data-option-id="3">Small</option>  <option value="2" data-option-id="3">Standard</option>  <option value="2" data-option-id="4">Standard</option>  <option value="3" data-option-id="4">Large</option></select>

send html select option disabled attribute with POST and enabled select option attribute with onclick in input form

You can do it like this.

For example

<script>

function processForm(e) {
    if (e.preventDefault) e.preventDefault();

    var input = document.createElement('input');
    input.type = 'hidden';
    input.name = "my-disabled-check-input";
    input.value = document.getElementById('table B').disabled;
    this.appendChild(input);

    this.submit();
}

var form = document.getElementById('my-form');
if (form.attachEvent) {
    form.attachEvent("submit", processForm);
} else {
    form.addEventListener("submit", processForm);
}
</script>

You could also just add another onclick function as well without the same event listener and then submit the form with form.submit();

Then in your PHP file just treat it as a normal POST variable.
You would want to look at $_POST['my-disabled-check-input']; if we are doing it like I setup.

In your form html you can set the POST URL. This URL can be the page that displays the form and also receive the POST variables. If you are unfamiliar with these terms then have a look at https://www.w3schools.com/html/html_forms.asp

But basically you can set an "action" which is just the URL to the php file.

So taken directly from W3schools a form looks like this.

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

If wanted to have a PHP file that displayed the form and took $_POST variables we can do something like this.

<?php
if($_POST) {
 echo "Post Variables sent";
 var_dump($_POST);
} else {
 echo "Where I will put my form HTML and JS.";
}
?>

Your PHP can also be used like this to make writing HTML easier.

<?php if($_POST): ?>
    Your name is <?=$_POST['fname']?> <?=$_POST['lname']?>.
<?php else: ?>
    <form action="/action_page.php">
      <label for="fname">First name:</label><br>
      <input type="text" id="fname" name="fname" value="John"><br>
      <label for="lname">Last name:</label><br>
      <input type="text" id="lname" name="lname" value="Doe"><br><br>
      <input type="submit" value="Submit">
    </form>
<?php endif; ?>

This <?=$_POST['fname']?> is equivalent to <?php echo $_POST['fname']; ?> but just a little shorter and I like using it that way in my HTML views.

This script doesn't take into consideration any user input parsing so keep that in mind. You may also want to look into HTML 5 form validation to make sure the input is only information you expect and also PHP filtering of user input.

Disabling select field and showing disabled as selected option

You can merge both functions into one.

function toggleDisabled() {  var dropdown = $('#s');  var disabled = dropdown.prop('disabled');  if (!disabled) {    // add option to the top of the list    dropdown.prepend('<option>unavailable</option>');  } else {    // remove any option with no value    $('option:not([value])', dropdown).remove();  }  // flip disabled and change current value to first  dropdown.prop('disabled', !disabled).val($('option:first', dropdown).val());}
// just for testing
$('button').click(function() {  toggleDisabled();});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><select id="s">  <option value="1">1</option>  <option value="2">2</option>  <option value="3">3</option></select>
<button>click me</button>

<select>
  <option disabled selected value> -- select an option -- </option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>