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

node.js: The Yahoo weather jQuery plugin fails to display any data

Guide on submitting a form using a custom AJAX function based on the id or class parameter

PHP and jQuery: tackling quotation mark problems in output

Restarting the timer in JavaScript

How can I execute route-specific middleware in advance of param middleware in Express v4?

The controller remains unresponsive when attempting to activate the button on the webpage

Monitor modifications to documents and their respective sub-collections in Firebase Cloud Functions

Utilize jQuery post to send a request to a particular function located at a given URL

Encountering npm install failure post updating node version

What is causing the bullets for the unordered list to appear before the items are inserted into the list?

The css-loader is missing the required dependency peer Webpack5, causing a resolution error

Guide on incorporating text input areas into specific positions within a string

What is the best way to activate a JQ function with my submit button?

Automatically clear out table rows once the maximum row limit is reached, then append new data using the WebSocket data in JavaScript

HTML5 Division Element Dimensions

Receiving CORS response from the server for just one of the two API calls

Is your React conditional rendering malfunctioning due to state issues?

Error: The requested resource, youtube#videoListResponse, is currently unavailable

Utilizing jQuery to load HTML content into a div restricts my ability to navigate back and forth seamlessly

verify whether the image source has been altered