CODEWITHSUNDEEP
javascriptjqueryhtmldynamicdatalist
ToMakPo
ToMakPo

Reputation: 864

JS: Get the .html() of selected datalist option

I have the following code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- add jquery -->

CITY<br>
<input id='cities' type="text" list="list_items">
<datalist id="list_items">
  <option value='Kent'>WA</option> <!-- PLEASE NOTE THAT THERE ARE REPEATING CITY NAMES -->
  <option value='Kent'>DE</option>
  <option value='New York City'>NY</option> <!-- AND REPEATING STATE NAMES -->
  <option value='Liverpool'>NY</option>
  <option value='Brentford'>SD</option>
</datalist>
<br><br>

STATE<br>
<input id='states' type="text" disabled>

<script>
  $('#cities').on('change', function(val) {
    $('#states').val(val.html())
  })
</script>

https://jsfiddle.net/pxcc1vn4/3/

I am trying to make it so that I can select an item from a datalist and have the value of the selected datalist option be in the first input and have the .html() of the selected datalist option be placed in the second input.

Upvotes: 1

Views: 842

Answers (5)

Rahul
Rahul

Reputation: 18567

Try this snippet,

HTML CODE :

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <!-- add jquery -->

CITY<br>
<input id='cities' type="text" list="list_items">
<datalist id="list_items">
  <option value='Kent'>WA</option>
  <option value='Kent'>DE</option>
  <option value='New York City'>NY</option>
  <option value='Liverpool'>NY</option>
  <option value='Brentford'>SD</option>
</datalist>
<br><br>
STATE<br>
<input id='states' type="text" disabled>

JS CODE :

$(document).on("input", "#cities", function(){
  var val = this.value;

  if($('#list_items').find('option').filter(function(){
        return this.value.toUpperCase() === val.toUpperCase();        
    }).length) {
        //send ajax request
        $("#states").val(this.value);
    }
});

And here is working jsfiddle

EDIT

HTML CODE :

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <!-- add jquery -->

CITY<br>
<input id='cities' type="text" list="list_items">
<datalist id="list_items">
  <option value='Kent'>WA</option>
  <option value='Kent'>DE</option>
  <option value='New York City'>NY</option>
  <option value='Liverpool'>NY</option>
  <option value='Brentford'>SD</option>
</datalist>
<br><br>
STATE<br>
<input id='states' type="text" disabled>
<input id='secondinput' type="text" disabled>

JS CODE :

$(document).on("input", "#cities", function(){
  var val = this.value;

  if($('#list_items').find('option').filter(function(){
        return this.value.toUpperCase() === val.toUpperCase();        
    }).length) {
        //send ajax request
        $("#states").val(this.value);
        $("#secondinput").val($("#list_items option[value='"+this.value+"']").text());
    }


});

This is working jsfiddle

Upvotes: 0

Curiousdev
Curiousdev

Reputation: 5788

You should use val.currentTarget.value 

$('#cities').on('change', function(val) {
  debugger;
  		
     var selectedValue = $("#list_items").find("option[value='"+val.currentTarget.value+"']").prop('outerHTML');
$('#states').val(selectedValue);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- add jquery -->

CITY<br>
<input id='cities' type="text" list="list_items">
<datalist id="list_items">
  <option value='Kent WA'>WA</option>
  <option value='Kent DE'>DE</option>
  <option value='New York City'>NY</option>
  <option value='Liverpool'>NY</option>
  <option value='Brentford'>SD</option>
</datalist>
<br><br>
STATE<br>
<input id='states' type="text" >

Upvotes: 0

XYZ
XYZ

Reputation: 4480

Try this instead.Select value form the first list and set that in second 

    $('#cities').on('change', function(event) {
      $("#states").val(event.target.value);
     })

Check this fiddle

Upvotes: 1

Chris Chen
Chris Chen

Reputation: 1293

This will do the trick.

$('#cities').on('change', function() {
    $('#states').val($(this).text())
})

http://api.jquery.com/html/ vs http://api.jquery.com/val/

Upvotes: 1

Kiran Shinde
Kiran Shinde

Reputation: 5992

Don't use same value for two options

Look at this https://jsfiddle.net/pxcc1vn4/12/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- add jquery -->

CITY<br>
<input id='cities' type="text" list="list_items">
<datalist id="list_items">
  <option value='Kent In WA'>WA</option>
  <option value='Kent In DE'>DE</option>
  <option value='New York City'>NY</option>
  <option value='Liverpool'>NY</option>
  <option value='Brentford'>SD</option>



STATE

$('#cities').on('change', function(event) {

    $('#states').val($('option[value="'+$(this).val()+'"]').html())
})

Upvotes: 0

Related Questions