নির্বাচনের উপাদান থেকে নির্বাচিত বিকল্প পান


93

আমি নীচে ড্রপডাউন থেকে নির্বাচিত বিকল্পটি পাওয়ার চেষ্টা করছি এবং সেই লেখার সাহায্যে অন্য আইটেমটি পপুলেট করব। IE ঝড় তুলছে এবং এটি ফায়ারফক্সে কাজ করে না:

$('#ddlCodes').change(function() {
  $('#txtEntry2').text('#ddlCodes option:selected').text();
});

আমি কি ভুল করছি?

উত্তর:


187

এখানে একটি সংক্ষিপ্ত সংস্করণ:

$('#ddlCodes').change(function() {
  $('#txtEntry2').text($(this).find(":selected").text());
});

karim79 made a good catch, judging by your element name txtEntry2 may be a textbox, if it's any kind of input, you'll need to use .val() instead or .text() like this:

  $('#txtEntry2').val($(this).find(":selected").text());

For the "what's wrong?" part of the question: .text() doesn't take a selector, it takes text you want it set to, or nothing to return the text already there. So you need to fetch the text you want, then put it in the .text(string) method on the object you want to set, like I have above.


7
If txtEntry2 is a text input, OP will need to use val() instead.
karim79

@karim79 - Good point, by the element name it probably is, updating.
Nick Craver

yes, by changing .text to .val and fetching the text differently, everything panned out. Thanks fellas
Matt

15

Try this:

$('#ddlCodes').change(function() {
  var option = this.options[this.selectedIndex];
  $('#txtEntry2').text($(option).text());
});

8

Here is a shorter version that should also work:

 $('#ddlCodes').change(function() {
      $('#txtEntry2').text(this.val());
    });

Uncaught TypeError: Object #<HTMLSelectElement> has no method 'val'
DoodleKana

1
this.value would fix it.
Kris Selbekk

4

With less jQuery:

<select name="ddlCodes"
 onchange="$('#txtEntry2').text(this.options[this.selectedIndex].value);">

this.options[this.selectedIndex].value is plain JavaScript.

(Source: German SelfHTML)


2

Try following code

$('#ddlCodes').change(function() {
  $('#txtEntry2').val(  $('#ddlCodes :selected').text() );
});

2

To know number of selected elements use

$("select option:selected").length

To Get the value of all selected elements use

    var str = "";
  $("select option:selected").each(function () {
        str += $(this).text() + " ";
      });


1

The first part is to get the element from the drop down menu which may look like this:

<select id="cycles_list">
    <option value="10">10</option>
    <option value="100">100</option>
    <option value="1000">1000</option>
    <option value="10000">10000</option>
</select>

To capture via jQuery you can do something like so:

$('#cycles_list').change(function() {
    var mylist = document.getElementById("cycles_list");
    iterations = mylist.options[mylist.selectedIndex].text;
});

Once you have stored the value in your variable, the next step would be to send the information stored in the variable to the form field or HTML element of your choosing. It may be a div p or custom element.

i.e. <p></p> OR <div></div>

You would use:

$('p').html(iterations); OR $('div').html(iterations);

If you wish to populate a text field such as:

<input type="text" name="textform" id="textform"></input>

You would use:

$('#textform').text = iterations;

Of course you can do all of the above in less steps, I just believe it helps people to learn when you break it all down into easy to understand steps... Hope this helps!


1

Using the selectedOptions property (HTML5) you can get the selected option(s)

document.getElementbyId("id").selectedOptions; 

With JQuery can be achieved by doing this

$("#id")[0].selectedOptions; 

or

$("#id").prop("selectedOptions");

The property contains an HTMLCollection array similitar to this one selected option

[<option value="1">​ABC</option>]

or multiple selections

[<option value="1">​ABC</option>, <option value="2">​DEF</option> ...]

0

The above would very well work, but it seems you have missed the jQuery typecast for the dropdown text. Other than that it would be advisable to use .val() to set text for an input text type element. With these changes the code would look like the following:

    $('#txtEntry2').val($('#ddlCodes option:selected').text());

0

if you have this already and use jquery this will be your answer:

$($(this)[0].selectedOptions[0]).text()


0

Given this HTML:

<select>
    <option value="0">One</option>
    <option value="1">Two</option>
</select>

Select by description for jQuery v1.6+:

var text1 = 'Two';
$("select option").filter(function() {
    //may want to use $.trim in here
    return $(this).text() == text1; 
}).prop('selected', true);
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.