Change the HTML attribute in the option with JQUERY

Question

Change the HTML attribute in the option with JQUERY

Navigation

#1 by (0 votes)

0

I'm trying to change the value of the select field with option to disabled, but only when the user clicks the input field.

See the image to understand better:

Iwanttoexactlyleavethefirst"option" disabled only when the user clicks the field, I'm trying this, but it's not right, I'm starting to see Jquery Now.

<select id="" class="form-input" placeholder="Categoria: *">
    <option value="categoria" id="#cat">Categoria: *</option>
    <option value="buracos nas ruas">Buracos nas ruas</option>
    <option value="esgoto a ceu aberto">Esgoto a céu aberto</option>
    <option value="lixo em local proibido">Lixo em local proibido</option>
    <option value="falta de iluminação">Falta de iluminação</option>
    <option value="outros">Outros</option>
</select>


$('label select option').click(function(){
    $('#cat').html('<option  disabled >Categoria: *</option>');
});

If anyone can help me, I thank him immensely.

javascript jquery html5 html-select option

asked by anonymous 10.05.2018 / 15:23

1 answer

Preview of the Image in a modal via a button Scroll with Selenium in Python: Error

score 0 · Answer 1

You're doing it wrong. The first option you can leave with value="" and put id="cat" (which is also wrong: id="#cat" ) and name="categoria" in select , thus:

<select id="cat" name="categoria" class="form-input">
    <option value="">Categoria: *</option>
    <option value="buracos nas ruas">Buracos nas ruas</option>
    <option value="esgoto a ceu aberto">Esgoto a céu aberto</option>
    <option value="lixo em local proibido">Lixo em local proibido</option>
    <option value="falta de iluminação">Falta de iluminação</option>
    <option value="outros">Outros</option>
</select>

This placeholder="Categoria: *" does not need to either. The first option is that it will play the role of the "placeholder".

As for disabling the first option when clicking on select , you can do this:

// seleciono o select com id="cat"
// com dois eventos: focus e blur
$('#cat').on('focus blur', function(e){
    $('option:first', this) // selecione a primeira option
    .prop('disabled', e.type == 'focus' ? true : false);
    // desabilito se o evento for focus
    // habilito se o evento for blur
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><selectid="cat" name="categoria" class="form-input" placeholder="Categoria: *">
    <option value="">Categoria: *</option>
    <option value="buracos nas ruas">Buracos nas ruas</option>
    <option value="esgoto a ceu aberto">Esgoto a céu aberto</option>
    <option value="lixo em local proibido">Lixo em local proibido</option>
    <option value="falta de iluminação">Falta de iluminação</option>
    <option value="outros">Outros</option>
</select>