Multicol Select

by Ben Clayton

HTML

<div class="singleselect">
  <table>
    <tr data-select="aaaaa">
      <td>aaaaa</td>
      <td>1</td>
    </tr>
    <tr data-select="bb">
      <td>bb</td>
      <td>2</td>
    </tr>
    <tr data-select="ccccccccc">
      <td>ccccccccc</td>
      <td>3</td>
    </tr>
    <tr>
      <td>dddd</td>
      <td>4</td>
    </tr>
    <tr>
      <td>aaaaax</td>
      <td>5</td>
    </tr>
    <tr>
      <td>bbx</td>
      <td>6</td>
    </tr>
    <tr>
      <td>cccccccccx</td>
      <td>7</td>
    </tr>
    <tr>
      <td>ddddx</td>
      <td>8</td>
    </tr>
  </table>
  <input name="sel1" value="" />
</div>

CSS

.singleselect {
  overflow: auto;
  height: 150px;
}

.singleselect .selected {
  background-color: rgba(0, 0, 128, 0.3)
}

JavaScript

$("td").click(function() {
	var val="";
  if ($(this).parent().hasClass('selected')) {
    $("tr").removeClass('selected');
  } else {
    $("tr").removeClass('selected');
    $(this).parent().addClass('selected');
    val = $(this).parent().data('select');
  }
  $("[name='sel1']").val(val);
});