CODEWITHSUNDEEP
jqueryselectfind
Syamili V
Syamili V

Reputation: 53

make a select box readonly- shows the contents but not able to change any options

i have a select box full of values. How to do this condition in jquery:-

I tried with the following, but it can be added only new value. Please help

$('.selectBox')
    .find('option')
    .remove()
    .end()
    .append('<option value='m'>text</option>')
    .val('NEWval');

EDIT I have a select val in my variable, i want to select only those in the select box and remove all others. my purpose actually is to make the select box READONLY. when i tried with 'disabled' it is not reading the value from it.

EDIT 2

   var columns=[];
    var col=[];
    $('#' +id).find('td').each(function(index, cell){
        columns.push($(cell).text());
         col.push($(this).attr("class"));
    });

    var m = (col[2].match(/\d+/)); 
    // $('.selectBox').val(m) ; this was earlier to select the value that corresponds to "m"


 $('.selectBox option:contains(' + m + ')').show().siblings('option').hide();
 $('.selectBox').val(m);

But iam getting no changes in the select box.

Upvotes: 0

Views: 206

Answers (2)

Manoz
Manoz

Reputation: 6587

Assume if you have retrieved the value='3' from server side-

Then in your code-

    var value=3;//retrieved value

 $('.selectBox option[val="' + value + '"]')
    .prop('selected', true)
    .siblings()
    .attr('disabled',true);

Here is the demo-

http://jsfiddle.net/judnwcyf/6/

Upvotes: 2

Jai
Jai

Reputation: 74738

I guess you want something like this:

var option = "ccc";

$('select option:contains(' + option + ')').show().siblings('option').hide();
$('select').val(option);


var option = "ccc";

$('select option:contains(' + option + ')').show().siblings('option').hide();
$('select').val(option);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option>select...</option>
  <option>aaa</option>
  <option>bbb</option>
  <option>ccc</option>
  <option>ddd</option>
</select>

As per your edit 2:

$('select option[value*="' + m + '"]').show().siblings('option').hide();
$('select').val(m);

Upvotes: 1

Related Questions