How to use the value of options?

Asked

Viewed 2,439 times

4

Inside the "options.html" file I know exactly how to make a tagging work to enable some set of javascript like...

<label>
    <input type="checkbox" id="test">
    Habilitar
</label>

That will run some following codes within options.js:

var test = document.getElementById('test').checked;

test: test

test: false

document.getElementById('test').checked = items.test;

Then the final result will be activated within an example.js:

var storage = chrome.storage.sync;
var info = 0;

var total_requests = 0;
var processed_requests = 0;

var cookie = document.cookie;

storage.get(function(settings) {
    if (settings.test === undefined) { 
        settings.test = false;
        storage.set({'test': settings.test}); 
    }
    if (settings.test) {
        \\alguma coisa aqui
    }
});

If you understood what I meant, now comes my doubt; I’m wondering how to do this with some value from a setting that is being set in a <select>.

<select id="exemplo">
    <option value="exemplofoi">Padrão</option>
    <option value="exemplofoi2">Extra</option>
</select>

In case you don’t understand, I’m wanting to use Storage.get to enable a javascript only when this value is active in the extension settings page.

Answer:

storage.get(function(settings) {
    if (settings.exemplo === undefined) { 
        settings.exemplo = false;
        storage.set({'exemplo': settings.exemplo}); 
    }
    if (settings.exemplo == 'exemplofoi') {
        \\alguma coisa aqui
    }
});
javascript html google-chrome-extension

  • Just give an improved on your question to make it as simple as possible to understand

  • I did an update improving a little more the details of the question.

2 answers

2


If I understand correctly, you want to take the value of < option> that is selected, I will respond with this understanding:

<!DOCTYPE html>
<html>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

    <select id="exemplo">
        <option value="option01">Padrão</option>
        <option value="option02">Opção 2</option>    
    </select>

    <button id="pegar">Pegar Valor</button>
    
<script>
    $("#pegar").click(function(){ 
        var opcao = $('#exemplo :checked').val()
        if( opcao == 'option01' ){
            //chama sua funcao aqui
            alert( 'chama sua funcao na opcao1' );
        }
        if( opcao == 'option02' ){
            //chama sua funcao aqui
            alert( 'chama sua funcao na opcao2' );
        }
            
    });
</script>

</body>
</html>

  • Yes, but I want to use it to enable an extension function. Type: value option01 will enable one thing, option02 will prompt you to enable something else from the extension. I don’t know how to use Storage.get to do this process.

  • I’ll edit it so you understand the idea of calling one function if option1 and calling another if option2

  • IT WORKED! I caught your help with Storage.get and it all worked out right. Thank you so much for helping me! : D

2

To take the value of option selected just take the value of the select, after all who receives the attribute name is it, ie when you select some option you are defining that the value of select will be the value of that option.

As a code speaks more than a thousand words, here’s an example using only Javascript:

var select = document.getElementById('select');

console.log(select.value);

var button = document.getElementById('button');

button.addEventListener('click', function(event){
  alert(select.value);
});
<select id="select">
  <option value="1">Um</option>
  <option value="2">Dois</option>
  <option value="3">Três</option>
</select>

<button id="button">Ver</button>

Here an example using jQuery:

jQuery(document).ready(function($){


  var $select = $('#select');
  
  var $button = $('#button');
  
  $button.click(function(event){
    alert($select.val());
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="select">
  <option value="1">Um</option>
  <option value="2">Dois</option>
  <option value="3">Três</option>
</select>

<button id="button">Ver</button>

  • Yes, but I want to use it to enable an extension function. Type: value 1 will enable one thing, 2 will prompt to enable something else from the extension. I don’t know how to use Storage.get to do this process.

Browser other questions tagged javascript html google-chrome-extension

You are not signed in. Login or sign up in order to post.