How to get content of selected item in a list view in Jquery

Question

I have a table something like this

   <table>
    <tr>
        <td></td>
        <td>
            <select>
                <option>One</option>
                <option>Two</option>
            </select>
            <button class="makeStrng">+</button>
        </td>
        <td>
            <input type="text" />
        </td>
    </tr>
    <tr>
        <td>
            <button class="addRow">Add ME</button>
        </td>
    </tr>
</table>

I am trying to get the text of selected item and add it to the input box. And if I click on the plus(+) again it should add the string again in the select box with a space.

For example if I select TWO first and clicked on the add button in text box it should show two then again if I select ONE it should show TWO ONE in the text box.

I can't use ID here because I am giving the user option to add this row many number of times.

Fiddle

SCRIPT

$(document).ready(function () {
    $(document).on("click", ".addRow,.makeStrng", function () {
        var $class = $(this).attr("class");
        if ($class == "addRow") {
            var $row = $(this).closest("tr"); // Finds the closest row <tr>
            var prev = $row.prev();
            $(prev).after("<tr>" + prev.html() + "</tr>");
        }
        if ($class == "makeStrng") {
            //alert("MakeStrng");
            $class = $(this).closest("select");
            alert($($class + " option:selected").text());
        }

    });

});

Thanks in advance

possible duplicate of [Get selected text from drop down list (select box) using jQuery](http://stackoverflow.com/questions/1643227/get-selected-text-from-drop-down-list-select-box-using-jquery) — emerson.marini, Dec 18 '14 at 13:40
@MelanciaUK I tried that answer but its not working in my scenario I tried this ` $("#yourdropdownid option:selected").text(); ` — Vikram Anand Bhushan, Dec 18 '14 at 13:45

score 0 · Answer 1 · answered Dec 18 '14 at 13:40

You can do

$(document).ready(function() {
  $(document).on("click", ".addRow,.makeStrng", function() {

    var $id = $(this).attr("id");
    var $class = $(this).attr("class");
    if ($class == "addRow") {
      var $row = $(this).closest("tr"); // Finds the closest row <tr>
      var prev = $row.prev();
      $(prev).after("<tr>" + prev.html() + "</tr>");
    }
    if ($class == "makeStrng") {
      //alert("MakeStrng");
      $class = $(this).closest("select");
      alert($($class + " option:selected").text());
    }

  });


  $(document).on("click", "button", function() {
    var $tr = $(this).closest('tr')
    $tr.find('input').val(function(i, val) {
      return (+val || 0) + (+$tr.find('select').val() || 0)
    })
  })

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <td></td>
    <td>
      <select>
        <option value="1">One</option>
        <option value="2">Two</option>
      </select>
      <button>+</button>
    </td>
    <td>
      <input type="text" />
    </td>
  </tr>
  <tr>
    <td>
      <button class="addRow">Add ME</button>
    </td>
  </tr>
</table>

it should concatenate the text() of the selected option and add it to the text box something like this , in javascript I do it like `x.value += y.value + " "; x.focus();` — Vikram Anand Bhushan, Dec 18 '14 at 13:44

score 0 · Answer 2 · answered Dec 18 '14 at 13:59

With the help of answer provided by

@Arun

Here is the working example

Fiddle

SCRIPT

$(document).ready(function () {
    $(document).on("click", ".addRow,.makeStrng", function () {
        var $class = $(this).attr("class");
        if ($class == "addRow") {
            var $row = $(this).closest("tr"); // Finds the closest row <tr>
            var prev = $row.prev();
            $(prev).after("<tr>" + prev.html() + "</tr>");
        }
        if ($class == "makeStrng") {
            var $tr = $(this).closest('tr')
            $tr.find('input').val(function (i, val) {
                return (val+" ") + ( $tr.find('select option:selected').text())
            });
        }

    });

});

HTML

<table>
    <tr>
        <td></td>
        <td>
            <select>
                <option>One</option>
                <option>Two</option>
            </select>
            <button class="makeStrng">+</button>
        </td>
        <td>
            <input type="text" />
        </td>
    </tr>
    <tr>
        <td>
            <button class="addRow">Add ME</button>
        </td>
    </tr>
</table>

Hope it helps to some one needy :) Thanks

How to get content of selected item in a list view in Jquery

2 Answers2