JavaScript Disable Select Option

Question

I have 3 select boxes, One which is the control for the other 2. My problem is that even though the option1 box is hidden if i select option2 from the option_selector, the form still tries to pass something for the option1 select.

Example of sting from form post

www.blank.com/Main/NewCustomers/newappstodetails.asp?options=option2&varintBusinessTypeID=&varintBusinessTypeID=23

I should only have one varintBusinessTypeID. I need that option1 is disabled and not hidden so it does not try to pass something.

Example of below

  <select id="option_selector" name="options">
<option value="option1">Office Options</option>
<option value="option2">Retial Options</option>
</select>
<div id="options">
<div id="option1">
    <select name="varintBusinessTypeID" id="varintBusinessTypeID">
        <option value="">Please Select</option>
        <option value="1">Office1</option>
        <option value="2">Office2</option>
        <option value="3">Office3</option>
    </select>
</div>
<div id="option2">
    <select name="varintBusinessTypeID" id="varintBusinessTypeID">
        <option value="">Please Select</option>
        <option value="1">Retail1</option>
        <option value="2">Retail2</option>
        <option value="3">Retail3</option>
    </select>
</div>
</div>



$('#option_selector').change(refresh_inputs);
refresh_inputs();

function refresh_inputs() {
    var name = $('#option_selector').attr('name');
    var val = $('#option_selector').val();
    $('#' + name + ' div').hide();
    $('#' + val).show();
}

Mex · Accepted Answer · 2015-02-12 15:16:32Z

2

You can set the name attribute of the select to a blank string.

$(document).ready(function(){
    $('#option_selector').change(refresh_inputs);
    refresh_inputs();
});

function refresh_inputs() {
    var name = $('#option_selector').attr('name');
    var val = $('#option_selector').val();
    $('#' + name + ' div').hide();
    $('#' + name + ' div select').attr('name', '');
    $('#' + val).show();
    $('#' + val + ' select').attr('name', 'varintBusinessTypeID');
}

Also you probably don't want 2 elements in the DOM with the same ID (varintBusinessTypeID).

answered Feb 12, 2015 at 15:16

Mex

9997 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

raymantle Over a year ago

Excellent, implemented and working exactly as required. Thanks Mex!

Oriol · Accepted Answer · 2015-02-12 15:50:35Z

First, ID must be unique, you can't repeat id="varintBusinessTypeID".

You can use something like

<select id="option_selector" name="options">
  <!-- ... -->
</select>
<select name="varintBusinessTypeID" id="varintBusinessTypeID-option1">
  <!-- ... -->
</select>
<select name="varintBusinessTypeID" id="varintBusinessTypeID-option2">
  <!-- ... -->
</select>

Then, to disable a select, you can use the disabled property (use prop in jQuery):

function refresh_inputs() {
    var val = $('#option_selector').val();
    $('[name="varintBusinessTypeID"]').hide().prop('disabled', true);
    $('#varintBusinessTypeID-'+val).show().prop('disabled', false);
}

$('#option_selector').change(refresh_inputs);
refresh_inputs();
function refresh_inputs() {
  var val = $('#option_selector').val();
  $('[name="varintBusinessTypeID"]').hide().prop('disabled', true);
  $('#varintBusinessTypeID-'+val).show().prop('disabled', false);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<form>
  <select id="option_selector" name="options">
    <option value="option1">Office Options</option>
    <option value="option2">Retial Options</option>
  </select>
  <div id="options">
    <select name="varintBusinessTypeID" id="varintBusinessTypeID-option1">
      <option value="">Please Select</option>
      <option value="1">Office1</option>
      <option value="2">Office2</option>
      <option value="3">Office3</option>
    </select>
    <select name="varintBusinessTypeID" id="varintBusinessTypeID-option2">
      <option value="">Please Select</option>
      <option value="1">Retail1</option>
      <option value="2">Retail2</option>
      <option value="3">Retail3</option>
    </select>
  </div>
  <input type="submit" />
</form>

The way @Mex provides works best, as the store procedure expects varintBusinessTypeID, so making the active select varintBusinessTypeID for fills this requirement.

Collectives™ on Stack Overflow

JavaScript Disable Select Option

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related