delete down-arrow in select list

Question

<select name="TESTFORM" disabled="disabled">
    <option>one</option>
    <option>two</option>
    <option>three</option>
    <option>four</option>
</select>

how can i disable drop-down list and send data or completely delete down-arrow? if i add disable="disabled" then i have blocked select list, but data TESTFORM dont send with form. Maybe in css? I select list with JavaScript.

Answer 1

Disabled fields are not submitted. So you have two solutions:

Enable the form field when the form's submit event is triggered and disable it again a moment later:

$('#yourform').submit(function() {
    $('select[name="TESTFORM"]', this).prop('disabled', false);
    window.setTimeout(function() {
        $('select[name="TESTFORM"]', this).prop('disabled', true);
    }, 100)
});

The other solution would be adding an <input type="hidden"> to actually send the information:

var val = $('#yourform select[name="TESTFORM"]').val();
$('<input/>', { type: 'hidden', 'name': 'TESTFORM' }).val(val).appendTo('#yourform');

Answer 2

As far as I know you can't "delete" the down arrow, and the post by ThiefMaster is backwards. What you'd want to do is enable that select list onsubmit of the form which would allow the value to be sent. If you're not using ajax to submit the form you don't need to worry about re-disabling it afterwards because the page will be reloaded and the select disabled again.

$('#yourform').submit(function() {
    $('select[name="TESTFORM"]', this).prop('disabled', false);
});