Adding a text field on top of a div based on the dropdown value selection

Question

Adding a text field on top of a div based on the dropdown value selection

I am working with a dropdown option inside a div. I want to make it so that when the last option is selected, a text box will appear on top of the dropdown. And when a different option is selected, the text box should be disabled. How can I achieve this?

Below is the code snippet I currently have:

<div class="col-xs-6 col-sm-6 col-md-4 col-md-offset-1">
  <div class="form-group">
   <select class="form-control input-sm" name="opt_change" >
      <option>Mustard</option>
      <option>Ketchup</option>
      <option>Relish</option>
   </select>
  </div>
</div>

javascript jquery html css twitter-bootstrap-3

Answer 1

Answer №1

$(this).find('option:selected').text()

will give you the selected option's text

Give this a shot:

$('[name="opt_change"]').on('change', function() {
  if ($(this).find('option:selected').text() == 'Relish') {
    $('#other').show().prop('disabled', false);
  } else {
    $('#other').prop('disabled', true);
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="text" id='other' style='display:none'>
<div class="col-xs-6 col-sm-6 col-md-4 col-md-offset-1">
  <div class="form-group">
    <select class="form-control" name="opt_change">
      <option>Mustard</option>
      <option>Ketchup</option>
      <option>Relish</option>
    </select>
  </div>
</div>

Edit: To check if the last option is selected, use

$(this).find('option:last').prop('selected')

in the if statement

Answer 2

$(this).find('option:selected').text()

will give you the selected option's text

Give this a shot:

$('[name="opt_change"]').on('change', function() {
  if ($(this).find('option:selected').text() == 'Relish') {
    $('#other').show().prop('disabled', false);
  } else {
    $('#other').prop('disabled', true);
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="text" id='other' style='display:none'>
<div class="col-xs-6 col-sm-6 col-md-4 col-md-offset-1">
  <div class="form-group">
    <select class="form-control" name="opt_change">
      <option>Mustard</option>
      <option>Ketchup</option>
      <option>Relish</option>
    </select>
  </div>
</div>

Edit: To check if the last option is selected, use

$(this).find('option:last').prop('selected')

in the if statement

Answer 3

Answer №2

Take a look at this solution that incorporates bootstrap (if you're using it) and jQuery:

http://codepen.io/anon/pen/JGVQNb

JS:

$("div").on("change", "select[name='opt_change']", function() {
  var theLastOption = $("select[name='opt_change'] option:last-child");
  if (theLastOption.is(':selected')) {
    $("#text-box").show();  
  } else {
    $("#text-box").hide();  
  }
});

HTML:

<div class="row">
  <div id="text-box" class="col-xs-6  col-md-offset-1 collapse">
    Hey there! I'm here.
  </div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-6 col-md-4 col-md-offset-1">
    <div class="form-group">
      <select class="form-control input-sm" name="opt_change">
        <option>Mustard</option>
        <option>Ketchup</option>
        <option>Relish</option>
      </select>
    </div>
  </div>
</div>

Answer 4

Take a look at this solution that incorporates bootstrap (if you're using it) and jQuery:

http://codepen.io/anon/pen/JGVQNb

JS:

$("div").on("change", "select[name='opt_change']", function() {
  var theLastOption = $("select[name='opt_change'] option:last-child");
  if (theLastOption.is(':selected')) {
    $("#text-box").show();  
  } else {
    $("#text-box").hide();  
  }
});

HTML:

<div class="row">
  <div id="text-box" class="col-xs-6  col-md-offset-1 collapse">
    Hey there! I'm here.
  </div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-6 col-md-4 col-md-offset-1">
    <div class="form-group">
      <select class="form-control input-sm" name="opt_change">
        <option>Mustard</option>
        <option>Ketchup</option>
        <option>Relish</option>
      </select>
    </div>
  </div>
</div>

Answer 5

Answer №3

If you want to achieve this, you can compare the last option value with the selected value like this:

$("select").change(function () {
    var last = $(this).find('option:last').val();
    var sel = $(this).val();

    if (last == sel) {
        var input = $(this).prev('input[type=text]');
        input.length == 0 ? $(this).before('<input type=text />') : input.prop('disabled', false);
    } else {
        $(this).prev('input[type=text]').prop('disabled', true);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
    <select class="form-control">
        <option>Mustard</option>
        <option>Ketchup</option>
        <option>Relish</option>
    </select>
</div>

Answer 6

If you want to achieve this, you can compare the last option value with the selected value like this:

$("select").change(function () {
    var last = $(this).find('option:last').val();
    var sel = $(this).val();

    if (last == sel) {
        var input = $(this).prev('input[type=text]');
        input.length == 0 ? $(this).before('<input type=text />') : input.prop('disabled', false);
    } else {
        $(this).prev('input[type=text]').prop('disabled', true);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
    <select class="form-control">
        <option>Mustard</option>
        <option>Ketchup</option>
        <option>Relish</option>
    </select>
</div>

Adding a text field on top of a div based on the dropdown value selection

Answer №1

Answer №2

Answer №3

Similar questions

Arrange data in JSON file based on job title (role name) category

``on click of the back button of the browser, automatically submit the form

In Node.js, I encountered an issue where req.body was returning as undefined, despite the fact that when I logged req, I could

The matMul function encountered an error due to a mismatch in the inner shapes of the Tensors. The shapes provided were 684,1 and 2,1, and the transposeA and transposeB parameters were both set

What is the best way to create a sequential number pattern of 1, 2, 3, 4 in Mongoose?

After reloading the data tables, analyze the information and dynamically highlight any rows in red that remain unchanged

Guide on setting up a shortcut key for an input field

Pass data from JavaScript to PHP using AJAX

Using Next.js: What is the process for dynamically registering the quill-blot-formatter to react-quill that has been imported on the client side rendering exclusively

Getting to grips with accessing HTML elements within a form

The user score tracking database, cataloging personal scoring history

mongodb cannot locate the schema method within the nested container

issues encountered with sending a multidimensional array using ajax, specifically with the index[0]

After the decimal point, there are two digits

Switch out the specific content within the p tag

Looking for jQuery bbq... is the grill fired up yet?

Is it possible to transfer .NET backend functions to a frontend framework like React or Vue for client-side execution?

Repeater employs Endless Scrolling feature within DotNetNuke

Selected value is not displayed in the textbox when using autocomplete feature

Angular 2 Typeface Delivery to the Server